html传送大文件原理,html5大文件上传技术分享

这篇文章主要介绍html5如何实现上传大文件技术，在此分享给大家，有需要的小伙伴参考下。

代码如下：

Document

添加文件

function get_filemd5sum(ofile) {

var file = ofile;

var tmp_md5;

var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,

// file = this.files[0],

chunkSize = 2 * 1024 * 1024, // Read in chunks of 2MB

chunks = Math.ceil(file.size / chunkSize),

currentChunk = 0,

spark = new SparkMD5.ArrayBuffer(),

fileReader = new FileReader();

fileReader.onload = function(e) {

// console.log('read chunk nr', currentChunk 1, 'of', chunks);

spark.append(e.target.result); // Append array buffer

currentChunk ;

var md5_progress = Math.floor((currentChunk / chunks) * 100);

console.log(file.name " 正在处理，请稍等," "已完成" md5_progress "%");

var handler_info = document.getElementById("handler_info");

var progressbar = document.getElementsByClassName("progressbar")[0];

handler_info.innerHTML=file.name " 正在处理，请稍等," "已完成" md5_progress "%"

progressbar.value =md5_progress;

if (currentChunk < chunks) {

loadNext();

} else {

tmp_md5 = spark.end();

console.log(tmp_md5)

handler_info.innerHTML = file.name "的MD5值是：" tmp_md5;

}

};

fileReader.onerror = function() {

console.warn('oops, something went wrong.');

};

function loadNext() {

var start = currentChunk * chunkSize,

end = ((start chunkSize) >= file.size) ? file.size : start chunkSize;

fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));

}

loadNext();

}

var uploadfile = document.getElementById('fileinput')

uploadfile.onchange = function(e){

var file = this.files[0];

if(!file) {

alert('请选择文件！');

return false;

}

get_filemd5sum(file)

}

相关推荐：

JS和WebService大文件上传代码分享

php大文件上传失败该怎么办？