Multiple files uploader that integrates well with existing form

问题

I know this question might be too generic, but after spending whole day with it I'm pretty lost on this one.

Anyone knows of uploader plugin, that would integrate easily with existing form?

All the uploader plugins I tried - jQuery File Upload, Plupload, Uploadify, Dropzone.js - work great for files submission, but are impossible to integrate into existing form - usually they require some files in the queue to submit the form at all, have troubles to submit other form fields etc.

I need something as simple as: the user fills the form, drags the files on the dropzone (or doesn't, if he doesn't want to submit any) and submits the form. I don't even need Ajax form submission (altough I would like to have it).

Any tips?

回答1:

If you don't want to use Ajax File upload, then you don't need to use any plugin. Just use the simple (default) form submission (input submit click).

That would be just like adding more input fields as :

<input type="file" name="somename" />
<input type="file" name="somename2" />

Now on the server-side you need to loop for each of the file. I am better in ASP.NET so, I would tell you how to do that in ASP.NET, if you're using some other language you might still get the main trick or idea.

for(int i =0; i < numFiles; i++) {
    var uploadedFile = Request.Files[i];
    /* save it! */
}

The above mentioned is a for loop, where you are looping equall to the number of files sent along with the HttpRequest. And you get each of the file and do what you want to do on it.

This one is simple! You can change the code for your own language such as PHP etc.

回答2:

AJAX file uploads are fairly easy when you strip away the extra features:

var fd = new FormData(form);

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", function(e) {
    // Handle progress
}, false);

xhr.addEventListener("load", function(e) {
    if( xhr.status == 200 ) {
        // Handle success
    } else {
        // Handel error
    }
}, false);

xhr.addEventListener("error", function(e) {
    // Handle error
}, false);

xhr.addEventListener("abort", function(e) {
    // Handle abort
}, false);

try {
    xhr.open('POST', 'http://server.com/uploader.php', true);
    xhr.send(fd);
} catch(e) {
    // Handle error
}

来源：https://stackoverflow.com/questions/22892462/multiple-files-uploader-that-integrates-well-with-existing-form

标签

jquery

forms

uploader