jQuery Ajax Datei-Upload

Question

Kann ich den folgenden jQuery-Code verwenden, um Datei-Upload mit POST-Methode einer Ajax-Anfrage durchzuführen?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

Wenn dies möglich ist, muss ich dann die data Teil? Ist das der richtige Weg? Ich POSTe die Datei nur an die Serverseite.

Ich habe herumgegoogelt, aber was ich gefunden habe, war ein Plugin, während ich es in meinem Plan nicht verwenden möchte. Zumindest für den Moment.

Answer 1

Ein AJAX-Upload ist in der Tat möglich mit XMLHttpRequest() . Keine iframes erforderlich. Der Fortschritt des Uploads kann angezeigt werden.

Für weitere Einzelheiten siehe: Antwort https://stackoverflow.com/a/4943774/873282 zur Frage jQuery Upload Fortschritt und AJAX-Dateiupload .

Answer 2

Mit purem js ist es einfacher

async function saveFile(inp) 
{
    let formData = new FormData();           
    formData.append("file", inp.files[0]);
    await fetch('/upload/somedata', {method: "POST", body: formData});    
    alert('success');
}

<input type="file" onchange="saveFile(this)" >

• Auf der Serverseite können Sie den ursprünglichen Dateinamen (und andere Informationen) lesen, der automatisch in die Anfrage aufgenommen wird.
• Sie müssen den Header "Content-Type" NICHT auf "multipart/form-data" setzen, der Browser setzt ihn automatisch.
• Diese Lösungen sollten auf allen gängigen Browsern funktionieren.

Hier ist ein weiterentwickeltes Snippet mit Fehlerbehandlung, Timeout und zusätzlichem Json-Versand

async function saveFile(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      

    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  

    const ctrl = new AbortController() // timeout
    setTimeout(() => ctrl.abort(), 50000);

    try {
       let r = await fetch('/upload/image', 
         {method: "POST", body: formData, signal: ctrl.signal}); 
       console.log('HTTP response code:',r.status); 
       alert('success');
    } catch(e) {
       console.log('Huston we have problem...:', e);
    }

}

<input type="file" onchange="saveFile(this)" >
<br><br>
Before selecting the file Open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>

Answer 3

Ich habe das folgendermaßen hinbekommen:

HTML

<input type="file" id="file">
<button id='process-file-button'>Process</button>

JS

$('#process-file-button').on('click', function (e) {
    let files = new FormData(), // you can consider this as 'data bag'
        url = 'yourUrl';

    files.append('fileName', $('#file')[0].files[0]); // append selected file to the bag named 'file'

    $.ajax({
        type: 'post',
        url: url,
        processData: false,
        contentType: false,
        data: files,
        success: function (response) {
            console.log(response);
        },
        error: function (err) {
            console.log(err);
        }
    });
});

PHP

if (isset($_FILES) && !empty($_FILES)) {
    $file = $_FILES['fileName'];
    $name = $file['name'];
    $path = $file['tmp_name'];

    // process your file

}

Answer 4

FormData verwenden. Das funktioniert wirklich gut :-) ...

var jform = new FormData();
jform.append('user',$('#user').val());
jform.append('image',$('#image').get(0).files[0]); // Here's the important bit

$.ajax({
    url: '/your-form-processing-page-url-here',
    type: 'POST',
    data: jform,
    dataType: 'json',
    mimeType: 'multipart/form-data', // this too
    contentType: false,
    cache: false,
    processData: false,
    success: function(data, status, jqXHR){
        alert('Hooray! All is well.');
        console.log(data);
        console.log(status);
        console.log(jqXHR);

    },
    error: function(jqXHR,status,error){
        // Hopefully we should never reach here
        console.log(jqXHR);
        console.log(status);
        console.log(error);
    }
});

Answer 5

Für den Fall, dass Sie es auf diese Weise tun wollen:

$.upload( form.action, new FormData( myForm))
.progress( function( progressEvent, upload) {
    if( progressEvent.lengthComputable) {
        var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + '%';
        if( upload) {
            console.log( percent + ' uploaded');
        } else {
            console.log( percent + ' downloaded');
        }
    }
})
.done( function() {
    console.log( 'Finished upload');                    
});

als

https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js

könnte Ihre Lösung sein.