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

Question

有谁知道一个jQuery-AJAX图片上传器，在同一页面上可以有多个表单实例 ？

让我详细说明我的情况！ 我有一个前端页面，用户可以在其中更改其个人资料，当页面加载时，它会遍历数据库中的所有内容类型行。

我需要为每种img类型应用一个图像上传表单。

问题是，我尝试过的每个插件仅允许我每页1个上传表单 ，但是我需要一个用于用户个人资料图像，一个用于签名图像，一个用于...，由表中的内容元素定义。

例：

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

以下是可以更好地理解我的问题的图片：

任何帮助或建议，将不胜感激。

Answer 1

是的，你可以！ 我建议上载效果很好的Uploadify脚本。 它支持多个文件上传和上传器的多个实例。

例：

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

和

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

就您而言，您的上传器无法正常运行，因为您在页面上拥有多个具有相同名称的ID。 无效 看一下有关示例，它代表了正确的想法，您必须使用代码或其他脚本来实现它！

Answer 2

重要提示：用户Ray Nicholus在下面评论说，此答案中提到的iframe“技巧”仅在IE9中有效。 对于所有现代浏览器，XHR2（ajax）请求都用于上传文件。

不知道这是您要找的东西吗？

带有进度条，拖放功能的多文件上传插件。

Widen / fine-uploader AJAX文件上传插件使用户可以上传多个文件，而无需刷新页面。 此外，您可以使用任何元素来触发文件选择窗口。 该插件会在您指定的按钮上方创建一个半透明的文件输入屏幕，因此，当用户单击该按钮时，将显示正常的文件选择窗口。 用户选择文件后，插件会将包含输入文件的表单提交给iFrame。 因此，这不是真正的AJAX，但可以提供相同的用户体验。

它已经变成一种商业产品： fineuploader.com

Github项目在这里