使用jQuery ajax从多个文件上传框上传图像

Question

I have multiple file upload boxes in a single HTML form and in each file box there is an associated upload button and a div container. Clicking the upload button should upload the respective file via AJAX (jQuery). I revered various questions and blogs where there is always a one file upload with one submit button. But my question here is how to upload the selected file on a click event on a button without submitting the entire form. Is that possible?

I put a mock HTML code and the corresponding jsfiddle also

<form id='parent-form' action='complete.php'>
    <div>
        <input type='file' name='img1'/>
        <input type='button' value='upload' name='btnimg1' />
    </div>
    <div>
        <input type='file' name='img2'/>
        <input type='button' value='upload' name='btnimg2' />
    </div>
    <div>
        <input type='file' name='img3'/>
        <input type='button' value='upload' name='btnimg3' />
    </div>
    <br/>
    <input type='submit' value='Complete' />
</form>

http://jsfiddle.net/z1bj4v9t/

Answer 1

Uploading files via AJAX is not support in all browsers, but in modern browsers it is possible. You'll need to attach a listener to the buttons next to the file fields, or you can upload multiple images at once.

Take a look at this answer: https://stackoverflow.com/a/20462576/1997303

Answer 2

Well this is a thing:

<form>
    <input type="file" multiple>
</form>

In HTML5 compatible browsers, add the "multiple" property to the <input type="file"> . A similar question was asked here .

I believe the fallback option is to actually use a Flash (of all things) plugin to force your input to be able to grab multiple files. At least this was how Facebook and others were doing it a couple years ago when I looked it up.

Edit to address your comment:

I might do something like:

$('[name^="btnimg"]').click(function(){
    /* AJAX sexiness here */
    return false; // IMPORTANT... keeps the main form from submitting
}

Then when submitting the main form, grab the data passed from AJAX uploads.