10

ドラッグ アンド ドロップによるネイティブ HTML5 複数ファイルのアップロードを実装しようとしています。http://onehub.com/blog/posts/designing-an-html5-drag-drop-file-uploader-using-sinatra-and-jquery-part-1/ や http :// www.html5rocks.com/en/tutorials/file/dndfiles/ しかし、必要な解決策がまだ見つかりません。

基本的に、HTML5 の複数ファイル アップロード入力要素の機能をシミュレートしたいのですが、魔女の div を使用してドロップ イベントをリッスンします。

つまり、次のようなフォームを作成したいと思います。

<form method="post" action="somesscript.php" enctype="multipart/form-data">
     <input  type="text" />
     <div class="drop">
         <p>Drop files here</p>
     </div>
     <input  type="submit" />
</form>

次のように作成されたように機能します。

<form method="post" action="somesscript.php" enctype="multipart/form-data">
   <input  type="text" />
   <input name="filesToUpload[]" type="file" multiple />
   <input  type="submit" />
</form>

ドラッグ アンド ドロップ フィールドはフォームの一部として扱われる必要があります。フォームが送信されるとき、入力からのすべてのデータと、ドラッグ アンド ドロップ フィールドからのファイル配列が AJAX 経由で送信されることだけが必要です。サーバー。

これまでのところ、ドロップ イベントでのファイル名の読み取りのみを実装しました。ドロップされたすべてのファイルを配列に追加したいのですが、属性ではなくファイル自体にアクセスする方法がわからないため、後者は、AJAX を介してフォーム送信時にこのファイル配列を残りのファイルと一緒に送信できます。フォームデータ。

私は次のようなものが欲しい：

var data = e.originalEvent.dataTransfer,
               files = data.files,
               filesArray = [],
               filesLength = files.length,
               i;


        for ( i = 0; i < filesLength; i++ ) {
            var file = files[i];
            filesArray.push(file); 
        }

 return filesArray;

また、これにはプラグインがあることは承知していますが、ネイティブにしたいです。

4

2 に答える 2

-3 
  <input name="filesInput" type="file" multiple  onchange="fileUpload(event)"/>
  <div class="drop" ondrop="fileUpload(event)" >
      <p>Drop files here</p>
  </div>

    function fileUpload(e){
       var files=e.target.files||e.dataTransfer.files;
       for(var i=0;i<files.length;i++)
        {
        //upload files
        }
    }

これは機能します。

于 2012-08-07T11:25:10.077 に答える