0

div非表示のドロップインを介してファイル入力を取得する小さなスクリプトを作成しましたinput。私のコードは次のようになります。

<!DOCTYPE html>
<html>
<head>
    <title>drop</title>
</head>
<body>

<div id="dropzone" style="height: 200px; width: 200px; background-color: green;">
drop here
</div>

<input type="file" id="file" class="hidden">

<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript" src="drop.js"></script>

</body>
</html>

ドロップ.js:

$(document).on("dragover drop", function(e) {
    e.preventDefault(); // allow dropping and don't navigate to file on drop
})
$("#dropzone").on("drop", function(e) {
    console.log("drop");
    $("#file").prop("files", e.originalEvent.dataTransfer.files); // put files into element
    this.style.backgroundColor='green';
});
$("#dropzone").on("dragover", function(e){
    console.log("dragover");
    this.style.backgroundColor='blue';
});
$("#dropzone").on("dragleave", function(e){
    console.log("dragleave");
    this.style.backgroundColor='green';
});

これは Chrome で動作しますが、残念ながら Firefox と Safari では動作しません。IE でも動作しないと思います。または、クロスブラウザの処理に役立つライブラリはありますか? したがって、この部分をアップロードまたは sth なしで入力フィールドにドロップするだけで、情報を入力するだけで済みます。

4

2 に答える 2

0

http://blueimp.github.com/jQuery-File-Upload/のようなビルド済みパッケージを調べてみてください。

于 2013-02-11T19:29:46.523 に答える
0

この問題は、ファイルのアップロードがすべてのブラウザーで確実に機能するようにするさまざまな JavaScript ライブラリによって以前に解決されています。現状では、完成したスクリプトは、File/Blob API をサポートするブラウザーでのみ機能します。これにより、IE9 以前と一部のバージョンの Android が除外されます。

車輪を再発明する必要はありません。これを行うことに固執する場合は、苛立たしい試練に備えてください。File API をサポートするブラウザーでドロップされたファイルを処理し、Chrome 21 以降でドロップされたディレクトリを処理し、File API をサポートしないブラウザーのファイル入力要素に頼るFine Uploaderをお勧めします。また、チャンク、失敗したアップロードの自動/手動再試行、以前のセッションからの失敗または中断されたアップロードの自動再開など、便利な他の多くの機能も含まれています。

于 2013-02-11T20:10:44.607 に答える