javascript - 如何将文件附加到文件输入字段

Question

我正在尝试创建文件拖放功能。

我可以从 div 进行拖放并处理文件。

现在我想将此文件附加到表单的 Input[type=file] 中。

我怎样才能做到这一点？

我尝试了 uploadFormData.append("files[]",f); 和衍生物，但它不起作用。我的调试是提交表单并检查标题以查看文件是否已发送。

有人能指出我如何实现这一目标的正确方向吗？

    <form enctype="multipart/form-data" id="yourregularuploadformId">
         <input type="file" name="files[]" multiple="multiple">
    </form>

<script>
      var uploadFormData = new FormData(jQuery("#yourregularuploadformId")[0]);

        function handleFileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();

        var files = evt.dataTransfer.files; // FileList object.

        // files is a FileList of File objects. List some properties.

        var output = [];


        for (var i = 0, f; f = files[i]; i++) {
          output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                      f.size, ' bytes, last modified: ',
                      f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                      '</li>');
               uploadFormData.append("files[]",f);
        }

        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
      }
</script>

Answer 1

恐怕你不能这样做，因为你无法动态填充 <input type="file" ....>只是因为如果允许这样做，那就意味着您可以从用户的计算机上获取任何文件而无需任何验证。

您可以尝试绑定(bind)一个像 .change() 这样的事件在您的 div 上以在拖动文件时触发，然后在该绑定(bind)上进行 ajax 调用以上传文件，最后从 ajax 回调中获取文件名(或上传完成时您想要的任何内容)并处理它你想要的方式