用jQuery交换文件输入元素

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。