Question

我正在尝试创建file drag and drop功能。

我在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" ....>只是因为如果这是允许的，那就意味着你可以从用户的计算机中获取任何文件而无需任何验证。

你可以尝试做的是绑定你的div上的.change()之类的事件，以便在拖动文件时触发，然后对将上传文件的绑定进行ajax调用，最后获取文件名（或者在上传完成时你想要的任何内容）来自ajax回调并按照你想要的方式处理它

Answer 2

可以将文件转换为Base64（使用FileReader并作为字符串上传

  var input = document.getElementById('image');

  function readImage(file, callback) {
    var reader = new FileReader();
    reader.onload = function() {
     input.value = reader.result;
    }
    reader.readAsDataURL(file);
  }

示例：https://codepen.io/ndan/pen/KJqZVd

FileReader文档：https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader

ps。

不要在数据库的Base64中存储图像
最好的解决方案是使用直接文件上传到云存储（s3，gcloud等）

如何将文件附加到“文件输入”字段中

2 个答案: