js做文件分片上传
分片上传视频，图片，音频，转base64
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>testFile</title>
<script src="~/Content/lib/jquery/jquery-2.0.3.min.js"></script>
</head>
<body>
<div>
<input type="file" id="file" accpet="image/gif,image/png,image/jpeg,image/jpg,ipa" />
<button id="btn" οnclick="clicka()"> 上传</button>
</div>
<script>
function readBlob(opt_startByte, opt_stopByte, index) {
var files = document.getElementById('file').files;
if (!files.length) {
alert('Please select a file!');
return;
}
var file = files[0];
var start = parseInt(opt_startByte) || 0;
var stop = parseInt(opt_stopByte) || file.size - 1;
var reader = new FileReader();//读取文件对象
reader.onloadend = function (evt) {//文件读取完成
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
//document.getElementById('byte_range').textContent =
// ['send bytes: ', start, ' - ', stop,
// ' of ', file.size, ' byte file'].join('');
----------json data
var block_size = opt_stopByte - opt_startByte;
var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(reader.result)));
//base64 with no gzip if you want to improve you can use gzip compress base64
var send_data = { 'fileName': file.name, 'index': index, 'file': base64String, 'isFinished': opt_stopByte >= file.size ? 1 : 0 };
//-------------ajax start
console.log(send_data);
$.ajax({
url: '/file/UploadFile',
type: 'post',
data: send_data,
tradition: true,
success: function (data) {
console.log(data);
if (opt_stopByte < file.size) {
readBlob(opt_startByte + block_size, opt_stopByte + block_size, index + 1)
}
},
beforeSend: function (xhr, settings) {//set csrf cookie
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus + " : " + errorThrown);
}
});
//---------ajax end
//}
//async_send('/upload/', send_data);
}
};
if (window.File && window.FileList && window.FileReader && window.Blob) {
} else {
alert('您的浏览器不支持File Api');
}
if (stop > file.size) {
stop = file.size;
}
var blob = file.slice(start, stop);
reader.readAsArrayBuffer(blob);
}
document.getElementById('btn').addEventListener('click', function (evt) {
var o_files = (document.getElementById('file').files);
var o_file = o_files[0];
var block = 1024 * 100;
console.log(o_file.size);
readBlob(0, 0 + block, 0);
}, false);
</script>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
