BinaryDevelop
  1. ホーム
  2. javascript

ページ上にファイルをドロップした際に、ファイル入力値を設定するには？重複

2023-10-21 12:33:22

質問

私は、フォームに送信するファイルを選択し、ファイルをドロップして同じことを行うことができるコントロールを作成しようとしています。画像であれば、ファイルのプレビューも表示されるようなものを考えています。 

<div class="preview-image-container">

  <input type="file" name="File" id="File" accept="image/*" 
         class="image-url form-control" style="display:none;" />

  <div class="preview-image-dummy"></div><img class="preview-image-url" />
  <div class="preview-image-instruction">
    <div class="preview-image-btn-browse btn btn-primary">Select file</div>
    <p>or drop it here.</p>
  </div>

</div>

MCVE を使ってみましょう。 .

ユーザはファイルを preview-image-container . ファイルはAJAXで送信されないので、ユーザはより多くのデータを含むフォームを送信する必要があります。

セキュリティ上の理由から、JavaScriptで入力ファイルの値を変更することは許可されていません。しかし、私はデフォルトの入力ファイルがドロップ可能であることを知っていますし、フォームにドロップすることでファイルを選択できるウェブサイトがたくさんあるので、それを行う方法があると推測しています。

MCVEからわかるように、私が興味を持っているのは jQuery または純粋な JavaScript を使いたいだけです。

しかし dropzone.js を使うこともできますが、私の要件には合いませんし、見た目をカスタマイズするのに相当の時間がかかります。さらに dropzone.js には、私の ASP.NET アプリケーション内で満たすことができない特定の構成要件があります。

同様の質問がありますが、適切な回答がありません。

HTMLのフォームの入力ファイルにファイルオブジェクトを設定する方法は？

また、似て非なるものとして 画像入力ファイルをドラッグドロップすると、アップロード前にプレビューが表示されます。 というのも、すでにドラッグドロップとプレビューの動作は実現しているからです。 私の質問は、親コンテナにファイルをドロップしたときに空のファイル入力がある問題に固有のものです。

どのように解決するのですか？

免責事項：2017年12月現在、モダンブラウザのみで正しいです。

TL;DR: はい、今ならできます!

*dataTransfer または FileList オブジェクトを持っている場合

以前は のように、プログラムによってファイルを変更し input[type=file] フィールドを変更することは、レガシーセキュリティの脆弱性のため、無効になっていました。

主要なブラウザの最後 (Firefox) では、最近、入力ファイル フィールドにファイルを設定することができるようになりました。によると のテストによると、W3C によると、Google Chrome ではすでにこれが可能なようです!

関連するスクリーンショットとテキストを MDN から引用しました。

あなたは を設定します。 の値を取得するだけでなく HTMLInputElement.files を設定し、すべてのモダンブラウザで

ソースとブラウザの互換性については MDN

Firefox バグフィックス議論 のスレッドには、この テストできるデモ で、そしてこちらが ソースを編集したい場合は . このリンクが切れたときのために、実行可能なスニペットとして以下にも記載しておきます。 

let target = document.documentElement;
let body = document.body;
let fileInput = document.querySelector('input');

target.addEventListener('dragover', (e) => {
  e.preventDefault();
  body.classList.add('dragging');
});

target.addEventListener('dragleave', () => {
  body.classList.remove('dragging');
});

target.addEventListener('drop', (e) => {
  e.preventDefault();
  body.classList.remove('dragging');
  
  fileInput.files = e.dataTransfer.files;
});

body {
  font-family: Roboto, sans-serif;
}

body.dragging::before {
  content: "Drop the file(s) anywhere on this page";
  position: fixed;
  left: 0; width: 100%;
  top: 0; height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  background-color: rgba(255, 255, 0, .3);
  pointer-events: none;
}

button, input {
  font-family: inherit;
}

a {
  color: blue;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
      <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet"> 

  <title>JS Bin</title>
</head>
<body>
  
  <h1>Drag and drop files into file input</h1>
  
  <p><small>Supported in <a href="https://github.com/whatwg/html/issues/2861">WebKit and Blink</a>. To test, drag and drop one or more files from your operating system onto this page.</small></p>
  
  <p>
    <input type="file">
  </p>

</body>
</html>

重要なお知らせです。

この操作は、既存の FileList または dataTransfer オブジェクトを作成し、それを入力ファイル要素に設定します (セッターメソッドはプレーンテキスト文字列を受け付けないため)。

詳細については、こちらのKaiidoさんの回答を参照してください。 FormDataオブジェクトに反映されるFileListオブジェクトに、Fileオブジェクトとlengthプロパティを設定するには？

さて、最初の質問に答えると、このようにシンプルであるべきです。 

document.querySelector('.preview-image-instruction')
    .addEventListener('drop', (ev) => {
        ev.preventDefault();
        document.querySelector('.image-url').files = ev.dataTransfer.files;
    });

関連

最新

おすすめ

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