ドラッグ＆ドロップファイルアップロード

Question

私は探しているものとそれをどのように実装するかを見つけるのに少し苦労しています。

ユーザーがカスタムアップロードボタンを押してファイルを選択してからJSを使用して変更（つまり、ユーザーがファイルを選択する）を確認してフォームを送信するという基本的なPHPファイルアップローダが動作しています画像をうまくアップロードします。

私が今でも欲しいのは、ドラッグの領域をアップロードするには&です。そのため、ユーザーはファイルエクスプローラから画像をドラッグして、指定された場所（ページ全体ではなく）にドロップした後、画像が自動的に送信され、同じPHP処理を使用するようにドロップされます。

これは可能ですか現実的ですか？

Answer 1

サードパーティのプラグインを使用せずにこれは絶対に現実的であり、可能です。

次のスニペットはあなたにそれが仕事ができるかのアイデアを与える必要があります。

ドロップエリア

$(".drop-files-container").bind("drop", function(e) { 
    var files = e.originalEvent.dataTransfer.files; 
    processFileUpload(files); 
    // forward the file object to your ajax upload method 
    return false; 
}); 

processFileUpload（） - メソッド：

function processFileUpload(droppedFiles) { 
     // add your files to the regular upload form 
    var uploadFormData = new FormData($("#yourregularuploadformId")[0]); 
    if(droppedFiles.length > 0) { // checks if any files were dropped 
     for(var f = 0; f < droppedFiles.length; f++) { // for-loop for each file dropped 
      uploadFormData.append("files[]",droppedFiles[f]); // adding every file to the form so you could upload multiple files 
     } 
    } 

// the final ajax call 

     $.ajax({ 
     url : "upload.php", // use your target 
     type : "POST", 
     data : uploadFormData, 
     cache : false, 
     contentType : false, 
     processData : false, 
     success : function(ret) { 
       // callback function 
     } 
     }); 

} 

書式例

このようなことを自由に使い始めることができます。あなたは、あなたが、プログレスバー、プレビュー、アニメーションのように希望する任意のエキストラを追加することができ、ここでもちろんhttp://caniuse.com/#feat=xhr2

を見つけることができます。こののブラウザのサポート...

Answer 2

このjQueryプラグインをチェックしてください！ Ajaxのファイルのアップロードともっとで：http://blueimp.github.com/jQuery-File-Upload/

ファイルアップロードウィジェット複数のファイルを選択して、jQueryのため&ドロップのサポート、 プログレスバーやプレビュー画像をドラッグします。クロスドメイン、 のチャンクと再開可能なファイルのアップロードとクライアント側のイメージのサイズ変更をサポートしています。 標準HTMLフォームファイルのアップロードをサポートするサーバーサイドプラットフォーム（PHP、Python、Ruby on Rails、Java、 Node.js、Goなど）と連携します。