Multiple upload forms using PHP, AJAX and jQuery on single page doesn't work

Question

Does anyone know of a jQuery-AJAX image uploader, where I can have multiple instances of the form on the same page?

Let me elaborate on my situation! I have a front end page, where a user can change his profile, when the page loads, it loops through all the content-type rows in the database.

I need to apply an image upload form for every type of img.

The problem is, that every plugin I have tried will only allow me to have 1 upload form per page, but I need one for user profile image, one for signature image one for ... as defined by the content elements in the table.

Example:

<form id='upload' method='post' action='script.php?val=profilepic' enctype='multipart/form-data'>
  <div id='drop'>
     Drop Here
     <a>Browse</a>
     <input type='file' name='upl' multiple />
   </div>
   <input style='visibility:hidden' id='".$var2['id']."' value='page_session_weo' />
   <ul style='display:none'>
     <!-- The file uploads will be shown here -->
   </ul>
</form>

<form id='upload' method='post' action='script.php?val=sigpic' enctype='multipart/form-data'>
   <div id='drop'>
     Drop Here
     <a>Browse</a>
     <input type='file' name='upl' multiple />
   </div>
   <input style='visibility:hidden' id='".$var2['id']."' value='page_session_weo' />
   <ul style='display:none'>
     <!-- The file uploads will be shown here -->
   </ul>
</form>

<form id='upload' method='post' action='script.php?val=homepagepic' enctype='multipart/form-data'>
   <div id='drop'>
     Drop Here
     <a>Browse</a>
     <input type='file' name='upl' multiple />
   </div>
   <input style='visibility:hidden' id='".$var2['id']."' value='page_session_weo' />
   <ul style='display:none'>
     <!-- The file uploads will be shown here -->
   </ul>
</form>

Below is the picture to get better understanding of my problem:

case

Any help or advise would be appreciated.

the quotes - " before $str5 are missing. I hope thats not your problem.? — Optimus Prime
– Optimus Prime, Commented Jul 10, 2013 at 13:32
using the same id for different forms in not good at all. By the way your code contains some errors too. — Gianpaolo Di Nino
– Gianpaolo Di Nino, Commented Jul 10, 2013 at 13:32
He doesn't want to use same id for different forms, I think. It looks, that he wants different instances of the same uploader? — Ilia Ross
– Ilia Ross, Commented Jul 10, 2013 at 13:35
David, you must just tie your script to the different ids! You can't have same ids on one page. It will not work this way. Try to use form id='upload1', id='upload2' and id='upload3' and correspond it with the init function (or in whatever way you have to load it) — Ilia Ross
– Ilia Ross, Commented Jul 10, 2013 at 13:43

Ilia Ross · Accepted Answer · 2013-07-10 13:51:29Z

1

Yes, you could! I would recommend Uploadify script that works very well. It supports multiple file uploads and multiple instances of the uploader.

Example:

$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

and

$(function() {
    $("#file_upload_2").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

In your case your uploader doesn't work simply because you have multiple ids with the same name on the page. It's invalid. Look at the example about, it represents correct idea that you would have to implement using your code or to use the other script to do it!

edited Jul 10, 2013 at 13:51

answered Jul 10, 2013 at 13:32

Ilia Ross

13.5k11 gold badges56 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Over a year ago

I looked into it and yes it would solve the problem but it has no drag and drop which is a requirement

Ilia Ross Over a year ago

David, UploadiFive ($5 version of Uploadify has no Flash and runs only on HTML5+jQuery) has drag and drop functionality! Please take a closer look to onDrop function of UploadiFive, here: uploadify.com/documentation/uploadifive/ondrop. You can also see it in action here: vimeo.com/40923687. I really was trying hard to sort out the best uploader, when was making it for my project - UloadiFive was certainly the best, 5-6 months ago at least and I believe still is!

Ilia Ross Over a year ago

David, my pleasure! ;) Good luck with your development!

cssyphus · Accepted Answer · 2013-08-26 17:04:18Z

1

Important: User Ray Nicholus comments below that the iframe "trick" mentioned in this answer only works in IE9. For all modern browsers, XHR2 (ajax) requests are used to upload the files.

Not sure if this is what you're looking for:

Multiple file upload plugin with progress-bar, drag-and-drop.

The Widen/fine-uploader AJAX file upload plug-in allows users to upload multiple files without having to refresh the page. In addition, you can use any element to trigger the file selection window. The plug-in creates a semi-transparent file input screen over the button you specify, so when a user clicks on the button, the normal file selection window is shown. After the user selects a file, the plug-in submits the form that contains the file input to an iFrame. So it isn’t true AJAX but provides the same user experience.

It has been turned into a commercial product: fineuploader.com

Github project is here

edited Aug 26, 2013 at 17:04

answered Jul 10, 2013 at 16:06

cssyphus

40.4k20 gold badges104 silver badges125 bronze badges

1 Comment

Ray Nicholus Over a year ago

The iframe "trick" you mentioned only occurs in Fine Uploader in IE9 and older. For all modern browsers, XHR2 (ajax) requests are used to upload the files.

Collectives™ on Stack Overflow

Multiple upload forms using PHP, AJAX and jQuery on single page doesn't work

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related