Question

我正在建立一个用户可以上传图片的网站。我不想使用像SWFUpload或Uploadify这样的Flash插件，但我希望他们能够一次上传多个图像。这将导致我使用multiple=""属性集的文件输入。问题是，用户只能从他们计算机上的同一目录中选择多个图像。

为了解决这个问题，我有一个涉及Javascript的想法。我的页面上有一个文件输入，其中设置了multiple属性，当用户选择带有该文件输入的文件时，我会用CSS隐藏它。之后，我使用Javascript在其位置放置一个新文件输入，用户可以使用它来从不同目录上传更多文件。这样，当用户拥有他们想要上传的所有图像时，我会发送一个包含多个文件输入的表单，我可以使用PHP作为我的后端来处理。

这是我的相关标记：

<div id="select_images">
    <input type="file" name="files[]" multiple="multiple" />
</div>

我的Javascript（使用jQuery库）：

$('#select_images input:first').change(function(){
    // User selected some images to upload, hide this file input
    $(this).css('right', '-10000px');

    // Place a new file input to take its place
    $(this).before('<input type="file" name="files[]" multiple="multiple" />');
});

目前，如果我选择要上传的图像，jQuery会正确隐藏当前文件输入，并在旧文件输入的位置放置一个新文件。所以标记就是这样：

<div id="select_images">
    <input type="file" multiple="multiple" name="files[]">
    <input type="file" multiple="multiple" name="files[]" style="right: -10000px;">
</div>

这就是问题所在。如果我使用jQuery放置的新文件输入选择要上传的更多文件，则没有任何反应。使用jQuery插入的新文件输入似乎不接受该文件，因为Firebug没有显示任何与输入相关的文件数据。是否有某种安全措施阻止我使用Javascript将文件放入插入DOM的输入中？

谢谢！

Answer 1

这种方法很好，但是。每次创建新文件输入时，您都可以立即开始提交该字段。如果您在页面上创建隐藏的iFrame，表单可以使用iFrame作为目标，从而立即开始上传过程。

同时，您可以创建一个新的表单元素，其中包含一个新的文件字段。冲洗并重复！

至于您的特殊问题，没有任何安全限制。您是否严格根据Firebug解决问题，或者您是否尝试将表单发布到服务器？有关javascript查看文件输入值的能力存在安全限制，这可能会影响Firebug。

使用jQuery交换文件输入元素

1 个答案: