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>

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

case

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

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＆＃34;技巧＆＃34;在这个答案中提到只适用于IE9。对于所有现代浏览器，XHR2（ajax）请求用于上传文件。

不确定这是否是您正在寻找的内容：

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

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

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

Github project is here

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

2 个答案: