在单个页面上使用 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

重要提示：用户 Ray Nicholus 在下面指出此答案中提到的 iframe“技巧”仅适用于 IE9。对于所有现代浏览器，XHR2 (ajax) 请求用于上传文件。

不确定这是否是您要查找的内容：

带进度条、拖放的多文件上传插件。

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

已转为商业产品：fineuploader.com

Github project is here

Answer 2

是的，你可以！我会推荐 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。这是无效的。看看这个例子，它代表了你必须使用你的代码来实现或使用其他脚本来实现它的正确想法！