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

ファイルを ( を使用して) 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。

  • DB の Base64 に画像を保存しないでください
  • 最善の解決策は、クラウド ストレージ (s3、gcloud など) にファイルを直接アップロードすることです。
于 2019-02-04T09:13:55.997 に答える