20

<input type="file">私は定期的にファイルをアップロードするWebサイトを持っており、フォームが送信されたときにデータをバックエンドにPOSTします。

フォームを段階的に拡張して、ブラウザの外部からビューポートの任意の場所（一部のブラウザに組み込まれているファイル入力フィールドだけでなく）にファイルをドロップしてアップロードできるようにしたいと思います。

フォームが自動送信するかどうかは重要ではありません。したがって、ドラッグアンドドロップでファイルフィールドのファイルのみが選択され、アップロードが開始されない場合は、問題ありません。複数のファイルをサポートする必要はありません。アップロードの進行状況やサムネイルなど、特別なものを表示する必要はありません。

ドラッグアンドドロップアップロードをサポートするJSライブラリがあることは知っていますが、それらはすべてAJAX経由でアップロードしているようです。それは可能ですが、アップロードエラーを処理したり、成功時に正しいメッセージをリダイレクトして表示したりするために、バックエンドとフロントエンドを変更する必要があります。

バックエンドの変更を必要としないプログレッシブエンハンスメントが必要です。これは、ページのフォームを使用して同期的に発生する必要があります。アップロードが「フォアグラウンド」で行われる限り、JSは問題ありません。もちろん、同期AJAXは機能しません。

4

3 に答える 3

24

<input type="file">実際には「同期」ではありませんが (JavaScript の実行は実際には停止しません)、プログラムで選択したファイルを設定できます。実際、そのような要素とドラッグは、ファイル バックエンドの実装 (FileおよびFileListインスタンス) を共有するため、非常に簡単です。さらに、両方のフロントエンドがFileLists を使用しているため、複数のファイルをドラッグしてもシームレスに動作します。

これは Chrome で動作します (jQuery を使用): http://jsfiddle.net/qMmPr/。

$(document).on("dragover drop", function(e) {
    e.preventDefault();  // allow dropping and don't navigate to file on drop
}).on("drop", function(e) {
    $("input[type='file']")
        .prop("files", e.originalEvent.dataTransfer.files)  // put files into element
        .closest("form")
          .submit();  // autosubmit as well
});
于 2012-08-25T13:07:55.067 に答える
-1

これを行うには、autoUpload を false に設定し、配列内のファイルを収集してから、フォームの送信時に、ここで説明されているように、すべてのファイルとフォーム データを使用して単一の ajax 呼び出しを実行します。

于 2015-06-01T06:07:09.397 に答える