BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み】標準的なhtmlファイル入力にファイルをドラッグドロップする。

2022-04-12 23:24:01

質問

最近は、ファイルを専用のコンテナにドラッグ＆ドロップして、XHR 2.でアップロードすることができます。 一度にたくさんアップロードできます。ライブ プログレス バーなどもあります。非常にクールなものです。 例はこちら

でも、そこまでのカッコよさは求めないこともあります。私が欲しいのは、ファイルをドラッグ＆ドロップして、一度にたくさん--。 を標準的なHTMLファイル入力に : <input type=file multiple> .

そんなことが可能なのでしょうか？ファイルドロップから正しいファイル名(?)でファイル入力を「埋める」方法はないのでしょうか？(ファイルシステムのセキュリティ上の理由から、完全なファイルパスは利用できません)。

なぜですか？ 普通のフォームで送信したいから。すべてのブラウザー、すべてのデバイスに対応。ドラッグ＆ドロップは、UXを向上させ、シンプルにするためのプログレッシブ・エンハンスメントに過ぎません。標準的なファイル入力のある標準的なフォーム（+ multiple 属性)は存在します。HTML5の機能拡張を加えたい。

編集

で知っています。 いくつか ブラウザで 時々 (ほぼ常に）ファイルをファイル入力自体にドロップします。Chromeは通常そうするのですが、時々失敗して、現在のページにファイルをロードしてしまいます（フォームに入力している場合は大失敗）。フール＆アプ;ブラウザープルーフしたいです。

解決方法は？

以下はChromeとFFで動作しますが、IE10+もカバーする解決策はまだ見つかっていません。 

// dragover and dragenter events need to have 'preventDefault' called
// in order for the 'drop' event to register. 
// See: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets
dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
  evt.preventDefault();
};

dropContainer.ondrop = function(evt) {
  // pretty simple -- but not for IE :(
  fileInput.files = evt.dataTransfer.files;

  // If you want to use some of the dropped files
  const dT = new DataTransfer();
  dT.items.add(evt.dataTransfer.files[0]);
  dT.items.add(evt.dataTransfer.files[3]);
  fileInput.files = dT.files;

  evt.preventDefault();
};

<!DOCTYPE html>
<html>
<body>
<div id="dropContainer" style="border:1px solid black;height:100px;">
   Drop Here
</div>
  Should update here:
  <input type="file" id="fileInput" />
</body>
</html>

を使用することになるでしょう。 addEventListener やjQuery（など）を使ってeventハンドラを登録することができます - これは単に簡略化のためです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します