jQueryドラッグアンドドロップ画像アップロード機能

Question

私は自分の簡単なAJAX画像アップロードスクリプトをjQuery経由でコーディングしようとしています。私はいくつかのプラグインを見つけましたが、必要なものに対してカスタマイズされた方法であり、適切に動作するものは得られません。

ユーザーが画像をドラッグしてページにドロップしたときに何らかの形で検出したいだけです。そこから、そのデータをアップロードして/ cache /ディレクトリに移動し、さらなるオプションを許可するのは難しくないと確信しています。

しかし、今私は完全にドラッグ/ドロップ機能に固執しています。私がこれにどのようにアプローチすべきかについては、まったく考えられていません。どんな種類のイベントハンドラが必要ですか？自分のイベントハンドラをカスタムコードする必要がありますか？どんなアドバイスをいただければ幸いですか

Answer 1

どのような種類のイベントハンドラが必要ですか？

Drag'n'dropにはHTML5ブラウザが必要ですが、これは現在ほとんどすべてのものです。

かなりのコードが必要なので、最初から始めないことをお勧めします。このラッパーがjQueryプラグインとして実装されています。

function fileSetUploadPercent(percent, divID){ 

    var uploadString = "Uploaded " + percent + " %"; 

    $('#'.divID).text(uploadString); 
} 
function fileUploadStarted(index, file, files_count){ 

    var divID = getDivID(index, file); 

    createFileUploadDiv(divID);  //create the div that will hold the upload status 

    fileSetUploadPercent(0, divID); //set the upload status to be 0 
} 

function fileUploadUpdate(index, file, currentProgress){ 

    //Logger.log("fileUploadUpdate(index, file, currentProgress)"); 

    var string = "index = " + index + " Uploading file " + file.fileName + " size is " + file.fileSize + " Progress = " + currentProgress; 
    $('#status').text(string); 

    var divID = getDivID(index, file); 
    fileSetUploadPercent(currentProgress, divID); 
} 

function fileUploadFinished(index, file, json, timeDiff){ 

    var divID = getDivID(index, file); 
    fileSetUploadPercent(100, divID); 

    if(json.status == "OK"){ 
     createThumbnailDiv(index, file, json.url, json.thumbnailURL); 
    } 
} 



function fileDocOver(event){ 
    $('#fileDropTarget').css('border', '2px dashed #000000').text("Drop files here"); 
} 
$(".fileDrop").filedrop({ 

      fallback_id: 'fallbackFileDrop', 
      url: '/api/upload.php', 
      // refresh: 1000, 
      paramname: 'fileUpload', 
      // maxfiles: 25,   // Ignored if queuefiles is set > 0 
      maxfilesize: 4,   // MB file size limit 
      // queuefiles: 0,   // Max files before queueing (for large volume uploads) 
      // queuewait: 200,   // Queue wait time if full 
      // data: {}, 
      // headers: {}, 
      // drop: empty, 
      // dragEnter: empty, 
      // dragOver: empty, 
      // dragLeave: empty, 
      // docEnter: empty, 
      docOver: fileDocOver, 
     // docLeave: fileDocLeave, 
      // beforeEach: empty, 
      // afterAll: empty, 
      // rename: empty, 
      // error: function(err, file, i) { 
      // alert(err); 
      // }, 
      uploadStarted: fileUploadStarted, 
      uploadFinished: fileUploadFinished, 
      progressUpdated: fileUploadUpdate, 
      //  speedUpdated 
     }); 

このHTMLを持ってアップロードを受け入れるWebページのビット：

http://www.github.com/weixiyen/jquery-filedrop

クラスのdivと文書内の要素を定義した後、あなたがドロップされたファイルを受け入れるように、それを初期化することができます。

<div class='fileDrop'> 
Upload a file by dragging it. 
<span id='fileDropTarget'/> 

</div> 

ファイルドロップは、外側<のdiv >上で動作しますが、それは、ユーザーがファイルをドロップする必要がある場所について混乱しないように「HERE DROP」と言っ素敵な大きな目標を作るために良いことです。

Answer 2

おそらく遅すぎます。しかし、チェックアウトする必要がありますhttp://www.dropzonejs.com/