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

Question

私はドラッグアンドドロップでファイルをアップロードするウェブサイトを運営しており、HTML5 File APIとを使用しています。新しいFileReaderを作成することに成功しましたが、ファイルのアップロード方法はわかりません。

holder = document.getElementById('uploader'); 

holder.ondragover = function() { 
    $("#uploader").addClass('dragover'); 
    return false; 
}; 

holder.ondragend = function() { 
    $("#uploader").removeClass('dragover'); 
    return false; 
}; 

holder.ondrop = function (e) { 
    $("#uploader").removeClass('dragover'); 
    e.preventDefault(); 

    var file = e.dataTransfer.files[0], 
     reader = new FileReader(); 
    reader.onload = function (event) { 
    //I shoud upload the file now... 
    }; 
    reader.readAsDataURL(file); 

    return false; 
}; 

私もフォームを持っている（ID：アップロード・フォーム）と入力ファイル・フィールド（ID：アップロード-入力を）私のコード（JavaScriptが）以下です。 アイデアはありますか？

P.S.私はjQueryを使用しているので、$("#uploader")などがあります。ドラッグ＆n個ドロップで働くゼロから

Answer 1

よりもむしろコードこの、なぜhtml5uploaderのようなものを使用していない、（FileReaderのなどを使用しています）：http://code.google.com/p/html5uploader/

EDIT：どうやら我々回答者が私たちの答えに傾向があることになっている永遠よりダウン投票の恐怖のために。 Google Codeのリンクは4年後に死んでしまったので、ここでは非常によく似たjQueryのプラグインがあります：http://www.igloolab.com/jquery-html5-uploader/

Answer 2

base64でエンコードされたファイルの内容を抽出してサーバーに送信します。

はJavaScript

var extractBase64Data; 
extractBase64Data = function(dataUrl) { 
    return dataUrl.substring(dataUrl.indexOf(',') + 1); 
}; 

// Inside the ondrop event 
Array.prototype.forEach.call(event.dataTransfer.files, function(file) { 
    var reader; 

    if (!file.type.match(options.matchType)) { 
    return; 
    } 

    reader = new FileReader(); 

    reader.onload = function(event) { 
    var contentsBase64; 
    if (event.target.readyState === FileReader.DONE) { 
     contentsBase64 = extractBase64Data(event.target.result); 
     return $.post(someURL, { 
     contentsBase64: contentsBase64 
     }); 
    } 
    }; 

    reader.readAsDataURL(file); 
}); 

CoffeeScriptの

extractBase64Data = (dataUrl) -> 
    dataUrl.substring(dataUrl.indexOf(',') + 1) 


# Inside the ondrop event 
Array::forEach.call event.dataTransfer.files, (file) -> 
    return unless file.type.match(options.matchType) 

    reader = new FileReader() 

    reader.onload = (event) -> 
    if event.target.readyState == FileReader.DONE 
     contentsBase64 = extractBase64Data(event.target.result) 
     $.post someURL, 
     contentsBase64: contentsBase64 

    reader.readAsDataURL(file)