Multiple file upload using javascript

Question

I am trying to implement a multiple file upload where I am right now using a iframe post form and implementing some extra functionality in the call back function.

I now want to add multiple file upload so that new form fields are created on clicking submit on first one and the first one is removed and the next one starts uploading once that is complete. How can Iframepost form pick upload of next file on completion of one.

$('#id').iframepostform(function(){
post:blah blah
complete:
my functionality
}

now i want to make recursive calls to iframe post form with the id's changed.

score 2 · Accepted Answer · edited May 23 '17 at 12:13

2

This has been done many times before. I would recommend not writing another custom JavaScript file uploader (unless you have to for some other reason). I recommend the excellent Pulpload. I expect that it would be substantially less effort to use an existing, well-tested, proven solution over a new implementation.

Edit: That's unfortunate! However, I have built a demo that I hope will help you reach a solution. It does not perform the jQuery AJAX post() but it does clone a form, increment the field ID numbers and then remove the old form when the "upload" is complete. For the purposes of a demo I am simulating the "upload" with a simple setTimeout().

Edit: Full solution with .live()

HTML:

<div>
    <form>
        <input type="file" id="form1_field1"/>
        <input type="submit" value="Make it so" id="form1_field2"/>
    </form>
</div>

JavaScript:

$('input[type="submit"]').live('click', function() {
    var formClone = $('form:first-child').clone();

    formClone.find('input').each(function(i) {
        $(this).attr('id', $(this).attr('id').replace(/form(\d+)/, function(fullMatch, n) { return 'form'+(Number(n)+1); }));
    });
    var thisForm = $(this).closest('form');
    $('div').append(formClone).children(':last').hide().fadeIn(1500);

    // do ajax post here (faking the "upload time" with a timeout)
    // but really the "hideFinishedForm" method body needs to
    // go in the upload success callback
    window.setTimeout(hideFinishedForm, 5000, thisForm);

    return false;
});

function hideFinishedForm(formToRemove) {
    $(formToRemove).remove();

    // now submit the next form
    $('form input[type="submit"]').trigger('click');
}

Further reading on the Difference between jQuery `click`, `bind`, `live`, `delegate`, `trigger` and `on` functions (with an example)?

edited May 23 '17 at 12:13

Community

1
1

answered Jun 22 '11 at 19:58

andyb

43,435
12
121
150

but the problem is i have an existing system out and need to extend that to allow multiple file uploads. So, is there a way i can add multiple file elements and update the iframepost form to loop through the hashed ids of the forms. – theshadowmonkey Jun 22 '11 at 20:07
+1 this is an area where "roll your own" is the path to great pain – heisenberg Jun 22 '11 at 20:10
is there a way i can call a callback function recursively with some variable value from after iframepostform complete: – theshadowmonkey Jun 22 '11 at 20:39
I've updated my answer with a demo which recursively submits a form. It's missing the AJAX post functionality but once you've clicked _submit_ it will fake an upload every 5 seconds. If you just want one iteration (so you can see what the code is doing) just comment out the line `$('form input[type="submit"]').trigger('click');`. Hope this helps. – andyb Jun 22 '11 at 21:00
thank you....i got the gist of it, but as i am pretty new to JS, I will try this first... – theshadowmonkey Jun 23 '11 at 19:06
Well I hope it helps. It might be easier for your implementation to allow users to add a new `` with a button (for example "Add another file" and then with one submit button just "submit" each individual form one by one with the _next_ upload triggered via the success callback from the _previous_ upload. – andyb Jun 23 '11 at 19:26
Ah ok, you can use [`.live()`](http://api.jquery.com/live/) instead. I'll update my answer. – andyb Jun 24 '11 at 19:38
Hi andyb, I have a doubt if an upload like plupload is supported on IE 6 or old browsers?? – theshadowmonkey Jun 27 '11 at 18:43
Quite the opposite actually. It is designed to be completely backwards compatible and supports many different upload runtimes (Flash, Gears, HTML 5, Silverlight, BrowserPlus, HTML 4). Flash and Silverlight are both supported in IE6. I agree that there might not be _native_ support but there is certainly the capability for it to support old browsers. – andyb Jun 27 '11 at 19:00
So, if i use plupload and implement a form, what if flash is not used in a browser. does the upload fall back to a normal upload?? – theshadowmonkey Jun 27 '11 at 20:53
The [example page](http://www.plupload.com/example_all_runtimes.php) show all the different variations of the upload runtime. Without Flash, the HTML 4 runtime fallback still works in IE6. – andyb Jun 28 '11 at 06:05

Multiple file upload using javascript

1 Answers1