在单个页面上使用PHP，AJAX和jQuery的多个上传表单不起作用

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:

Any help or advise would be appreciated.

Answer 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!

Answer 2

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