如何将文件添加到文件输入字段

问题描述 投票:-1回答:2

我想创建一个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>
javascript jquery forms
2个回答
1
投票

恐怕你不能做这种方式,因为你不能动态地填补<input type="file" ....>只是因为如果这是允许的,意味着你可以抓住从用户的计算机上的任何文件,而无需任何验证。

什么,你可以尝试做的是在你的DIV绑定像.change()事件触发当一个文件被拖动,然后进行对地结合Ajax调用,将上传的文件,最后得到的文件名(或任何你想要的时候上传从AJAX回调过程中你想要的方式结束)


0
投票

它可以将文件转换为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等)
© www.soinside.com 2019 - 2024. All rights reserved.