jQuery AJAX-Einzeldatei-Upload [duplicate]

Lesezeit: 6 Minuten

jQuery AJAX Einzeldatei Upload duplicate
Benutzer3195129

Ich weiß, dass diese Frage oft gestellt wurde, und ich habe mindestens 10 verschiedene Codes ausprobiert, um dies ohne Erfolg auszuführen.

Ich versuche, eine einzelne Datei hochzuladen mit jQuery.ajax(), aber es funktioniert nicht. Der folgende Code gibt immer aus:

Bitte wählen Sie eine Datei’, weil der Dateiname nicht festgelegt ist oder so.


HTML

<form enctype="multipart/form-data">
  <input name="file" type="file" />
  <input type="button" value="Upload" />
</form>
<div id="result"></div>

jQuery

$(function(){
  $(document).ready(function(){
    var files;

    $('input[type=file]').on('change', prepareUpload);
    function prepareUpload(event){
      files = event.target.files;
    };
    $(':button').click(function(){
        var formData = new FormData();
        $.each(files, function(key, value){
          formData.append(key, value);
        });
        alert(formData);
        $.ajax({
          url: 'check.php',  
          type: 'GET',
          data: formData,
          success: function(data){ $('#result').html(data); }, 
          cache: false,
          contentType: false,
          processData: false
        });
    });
  });
});

PHP

if(isset($_GET['file'])){
    $filename = $_FILES['file']['name'];
    if(isset($filename) && !empty($filename)){
        echo 'sup my man?!';
    }else{
        echo 'please choose a file';
    }
}else{
    echo 'not set';
}

Ich weiß nicht, was das Problem ist, ich weiß, es liegt in der FormData Objekterstellung, weil die Warnung – gut zu gehen, funktioniert nicht.

Übrigens ist es für mich wirklich wichtig, dass es in jQuery geschrieben wird.

  • Hast du es versucht dieses Plugin . Ich habe es 2 oder 3 Mal verwendet, aber es funktioniert wie ein Zauber.

    – CodeMonk

    19. Januar ’14 um 8:37


  • Ich verwende das plUpload-Plugin. Scheint einer der beliebtesten zu sein und hat bei mir gut funktioniert. plupload.com

    – Johnny

    19. Januar ’14 um 8:43

  • danke Leute, CodeMonk ja, ich habe versucht, diesen Code zu verwenden, das ist so ziemlich der Code in der Frage. und Johnny danke, aber ich habe versucht, dieses Problem zu lösen, ich möchte keine Plugins verwenden.

    – Benutzer3195129

    19. Januar ’14 um 9:01


jQuery AJAX Einzeldatei Upload duplicate
Benutzer3195129

Nach stundenlangem Suchen und Suchen nach Antworten habe ich es endlich geschafft!!!!! Code ist unten :))))

HTML-Code:

<form id="fileinfo" enctype="multipart/form-data" method="post" name="fileinfo">
    <label>File to stash:</label>
    <input type="file" name="file" required />
</form>
<input type="button" value="Stash the file!"></input>
<div id="output"></div>

jQuery:

$(function(){
    $('#uploadBTN').on('click', function(){ 
        var fd = new FormData($("#fileinfo"));
        //fd.append("CustomField", "This is some extra data");
        $.ajax({
            url: 'upload.php',  
            type: 'POST',
            data: fd,
            success:function(data){
                $('#output').html(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });
});

Im upload.php Datei können Sie auf die übermittelten Daten zugreifen $_FILES['file'].

Danke an alle, die versucht haben zu helfen 🙂

Ich habe die Antwort von hier (mit einigen Änderungen)
MDN

  • Verbesserung: Übergeben Sie nicht die vollständigen Formulardaten an den Konstruktor. Verwenden Sie var formData = new FormData(); formData.append(‘Datei’, $(‘Eingabe[type=file]’)[0].Dateien[0]); Daten: formData

    – tm1701

    15. Apr. ’17 um 10:17

  • Sie müssen die Verbesserungen von tjm1706 verwenden, um diese Lösung zu verwenden. Ich habe es mit und ohne diese Verbesserung probiert.

    – Michael Harley

    29. Januar ’19 um 7:28

A. Dateidaten aus dem Dateifeld holen

Als erstes müssen Sie eine Funktion an das Änderungsereignis in Ihrem Dateifeld und eine Funktion zum Abrufen der Dateidaten binden:

// Variable to store your files
var files;

// Add events
$('input[type=file]').on('change', prepareUpload);

// Grab the files and set them to our variable
function prepareUpload(event)
{
  files = event.target.files;
}

Dadurch werden die Dateidaten zur späteren Verwendung in einer Dateivariablen gespeichert.

B. Behandeln Sie den Datei-Upload beim Senden

Beim Absenden des Formulars müssen Sie den Dateiupload in einer eigenen AJAX-Anfrage behandeln. Fügen Sie die folgende Bindung und Funktion hinzu:

$('form').on('submit', uploadFiles);

// Catch the form submit and upload the files
function uploadFiles(event)
{
  event.stopPropagation(); // Stop stuff happening
    event.preventDefault(); // Totally stop stuff happening

// START A LOADING SPINNER HERE

// Create a formdata object and add the files
var data = new FormData();
$.each(files, function(key, value)
{
    data.append(key, value);
});

$.ajax({
    url: 'submit.php?files',
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function(data, textStatus, jqXHR)
    {
        if(typeof data.error === 'undefined')
        {
            // Success so call function to process the form
            submitForm(event, data);
        }
        else
        {
            // Handle errors here
            console.log('ERRORS: ' + data.error);
        }
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
        // Handle errors here
        console.log('ERRORS: ' + textStatus);
        // STOP LOADING SPINNER
    }
});
}

Diese Funktion erstellt ein neues formData-Objekt und hängt jede Datei daran an. Anschließend leitet er diese Daten als Anfrage an den Server weiter. 2 Attribute müssen auf false gesetzt werden:

  • processData – Weil jQuery die Datei-Arrays in Strings umwandelt und der Server sie nicht abholen kann.
  • contentType – Setzen Sie dies auf false, da jQuery standardmäßig application/x-www-form-urlencoded verwendet und die Dateien nicht sendet. Auch das Einstellen auf multipart/form-data scheint auch nicht zu funktionieren.

C. Laden Sie die Dateien hoch

Schnelles und schmutziges PHP-Skript zum Hochladen der Dateien und zum Zurückgeben einiger Informationen:

<?php // You need to add server side validation and better error handling here

$data = array();

if(isset($_GET['files']))
{  
$error = false;
$files = array();

$uploaddir="./uploads/";
foreach($_FILES as $file)
{
    if(move_uploaded_file($file['tmp_name'], $uploaddir .basename($file['name'])))
    {
        $files[] = $uploaddir .$file['name'];
    }
    else
    {
        $error = true;
    }
}
$data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files);
}
else
{
    $data = array('success' => 'Form was submitted', 'formData' => $_POST);
}

echo json_encode($data);

?>

IMP: Verwenden Sie das nicht, schreiben Sie Ihre eigenen.

D. Bearbeiten des Formulars Absenden

Die Erfolgsmethode der Upload-Funktion übergibt die vom Server zurückgesendeten Daten an die Submit-Funktion. Das kannst du dann als Teil deines Beitrags an den Server weitergeben:

function submitForm(event, data)
{
  // Create a jQuery object from the form
$form = $(event.target);

// Serialize the form data
var formData = $form.serialize();

// You should sterilise the file names
$.each(data.files, function(key, value)
{
    formData = formData + '&filenames[]=' + value;
});

$.ajax({
    url: 'submit.php',
    type: 'POST',
    data: formData,
    cache: false,
    dataType: 'json',
    success: function(data, textStatus, jqXHR)
    {
        if(typeof data.error === 'undefined')
        {
            // Success so call function to process the form
            console.log('SUCCESS: ' + data.success);
        }
        else
        {
            // Handle errors here
            console.log('ERRORS: ' + data.error);
        }
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
        // Handle errors here
        console.log('ERRORS: ' + textStatus);
    },
    complete: function()
    {
        // STOP LOADING SPINNER
    }
});
}

Schlussbemerkung

Dieses Skript ist nur ein Beispiel. Sie müssen sowohl die server- als auch die clientseitige Validierung durchführen und die Benutzer auf irgendeine Weise benachrichtigen, dass der Dateiupload stattfindet. Ich habe ein Projekt dafür gemacht auf Github wenn du sehen willst, dass es funktioniert.

Referenziert von

  • Nochmals vielen Dank, aber ich habe bereits versucht, es ohne Erfolg zu verwenden.

    – Benutzer3195129

    19. Januar ’14 um 9:37

  • Können Sie eine Demo / einen Bildschirmabzug / alles zeigen, um zu sehen, was passiert!

    – CodeMonk

    19. Januar ’14 um 9:44

  • sell4you.co.il/study/ajaxFileUpload.html

    – Benutzer3195129

    19. Januar ’14 um 11:24

  • wo lädst du die datei hoch? wie ich sehe sagt der Quellcode nicht viel aus. wo ist das action deines Formulars?

    – CodeMonk

    19. Januar ’14 um 14:25


  • Die Aktion ist die URL in der Funktion ‘$.ajax’. Wenn Sie dies angeben, sollten Sie keine Aktion auf der Registerkarte des Formulars angeben

    – Benutzer3195129

    19. Januar ’14 um 16:58 Uhr


.

297000cookie-checkjQuery AJAX-Einzeldatei-Upload [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy