0

我正在尝试创建一个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>
4

2 回答 2

2

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

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

于 2013-06-12T11:07:56.787 回答
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

附言。

  • 不要将图像存储在数据库中的 Base64 中
  • 最好的解决方案是使用直接文件上传到云存储（s3、gcloud 等）
于 2019-02-04T09:13:55.997 回答