HTML5拖放n拖放文件上傳

我正在運行一個網站，我想用Drag'n Drop上傳文件，使用HTML5 File API和。我已成功設法創建了一個新的FileReader，但我不知道如何上傳文件。我的代碼（JavaScript）的以下內容：HTML5拖放n拖放文件上傳

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：上傳輸入）。你有什麼想法嗎？

P.S.我使用jQuery，這就是爲什麼有$("#uploader")和其他。

來源

2011-06-28 Paris

而不是從頭這個代碼，爲什麼不使用類似html5uploader，其中通過拖放的N個液滴工作（使用的FileReader等）：http://code.google.com/p/html5uploader/

編輯：顯然，我們的受訪者都認爲將我們的答案永遠地，因爲擔心倒票。谷歌代碼鏈接現在已經死了（四年後），所以這裏是一個非常相似的jQuery插件：http://www.igloolab.com/jquery-html5-uploader/

來源

2011-06-28 21:23:57 Ben

BTW，這似乎不是一個谷歌的項目。 –

好的，更正了。 – Ben

我會試試看。謝謝:-) – Paris

你會想要提取base64編碼的文件內容，並通過合計服務器的Ajax。

的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)

來源

2011-06-29 07:25:40

HTML5拖放n拖放文件上傳

回答

相關問題