10

ドラッグ アンド ドロップ ファイル アップロード フィールドに取り組んでいます。

ユーザーが指定したファイルを含む FileList オブジェクトを返すことができます。非表示のファイル入力フィールドがあり、そこにファイル オブジェクトを追加して、AJAX 経由でフォーム データを送信できるようにします。

私が抱えている問題は、ファイル オブジェクトをファイル入力フィールドにコピーできないように見えることです。これが私がそれを試みている方法です：

var files = evt.dataTransfer.files; // FileList object.
var fileUploadElem = document.getElementById(fileUploadId);

// trying to copy the first file of files into the file upload field
fileUploadElem.files[0] = files[0];

// this statement returns '0' instead of '1'
console.log('fileUploadElem length: '+fileUploadElem.files.length);

アドバイスや指針をいただければ幸いです。

4

2 に答える 2

3

これは、FormData でそれを行う方法に関するMDNの例です。

function sendForm() {
  var output = document.getElementById("output");
  var data = new FormData(document.getElementById("fileinfo"));

  data.append("CustomField", "This is some extra data");

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "stash.pl", false)
  xhr.send(data);
  if (xhr.status == 200) {
    output.innerHTML += "Uploaded!<br />";
  } else {
    output.innerHTML += "Error " + xhr.status + " occurred uploading your file.<br />";
  }
}
于 2015-01-11T21:54:13.800 に答える