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")和其他。

答

而不是从头这个代码，为什么不使用类似html5uploader，其中通过拖放的N个液滴工作（使用的FileReader等）：http://code.google.com/p/html5uploader/

编辑：显然，我们的受访者都认为将我们的答案永远地，因为担心倒票。谷歌代码链接现在已经死了（四年后），所以这里是一个非常相似的jQuery插件：http://www.igloolab.com/jquery-html5-uploader/

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)

HTML5拖放n拖放文件上传

相关推荐