1

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/

Malaiselvan
  • 1,153
  • 1
  • 16
  • 42

2 Answers2

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

Community
  • 1
  • 1
redelschaap
  • 2,774
  • 2
  • 19
  • 32
  • Thanks. I refer the link. When the first upload button is clicked then the full form data will be sent via AJAX right. It will not send only the first image. Pls correct me if I am wrong. – Malaiselvan Nov 20 '14 at 22:46
  • You can also just upload a single file. Just change the listener from `$('#imageUploadForm').on('submit',` to `$('.uploadImageButton').on('click',` and add the class `uploadImageButton` to the buttons. – redelschaap Nov 21 '14 at 04:57
0

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.

Community
  • 1
  • 1
Phil Tune
  • 3,154
  • 3
  • 24
  • 46
  • Thanks for your answer. But I dont want to select and upload multiple images. I need to select single file but on different type=file boxes. – Malaiselvan Nov 20 '14 at 22:37
  • Gotcha. What would be the benefit of loading the files in AJAX _before_ submitting the form? – Phil Tune Nov 20 '14 at 22:40
  • My thoughts would be to use separate `
    `s for each uploader, then use Javascript to check if an upload has been done and grab that data to submit with the "main" form.
     – Phil Tune Nov 20 '14 at 22:42
  • The benefit is the user can view the uploaded images and once he is satisfied he can click the final form submit which will go and hit the database. – Malaiselvan Nov 20 '14 at 22:49
  • That's what I figured. Hmmm, I kinda have a theory about how it would work, but maybe you could rephrase your question with that consideration to get some other great minds on it. – Phil Tune Nov 20 '14 at 22:56
  • Updated my answer. Does that help at all? – Phil Tune Nov 20 '14 at 23:02