1

有谁知道 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>

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

案子

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

4

2 回答 2

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

于 2013-07-10T13:32:38.050 回答
1

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

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

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

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

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

Github 项目在这里

于 2013-07-10T16:06:52.183 回答