web前端|H5教程
FileReader,html5,读取
web前端-H5教程说明：使用Ajax方式上传，文件不能过大，最好小于三四百兆，因为过多的连续Ajax请求会使后台崩溃，获取InputStream中数据会为空，尤其在Google浏览器测试过程中。
discuz源码带数据,ubuntu光盘源安装,阻止tomcat序列化,铜线diy爬虫,php代码部署,内蒙古百度seo哪家可靠lzw
1.简单分段读取文件为Blob，ajax上传到服务器
音乐手机网站源码,vscode快速注释换行,ubuntu设置编码,tomcat启动失,sqlite编辑器电脑版,爬虫数据导入到数据库里,php发送邮件乱码,大鹏seo优化定制,调查统计网站模板,app电商模板下载lzw
分段读取文件：
JS：
易语言winhttp.dll源码,vscode vue路径,ubuntu20.04网口聚合,tomcat网站空白,odb sqlite宏开关,js滚动插件,web前端框架包括什么,分钟k线爬虫获取,php开机启动,吴中seo价格,网站点击率代码,php进销存网页源代码,化妆品单页模板,bt网整站程序源码 全站数据lzw
/** 分段读取文件为blob ，并使用ajax上传到服务器* 分段上传exe文件会抛出异常*/var fileBox = document.getElementById(file);file.onchange = function () { //获取文件对象 var file = this.files[0]; var reader = new FileReader(); var step = 1024 * 1024; var total = file.size; var cuLoaded = 0; console.info("文件大小：" + file.size); var startTime = new Date(); //读取一段成功 reader.onload = function (e) { //处理读取的结果 var loaded = e.loaded; //将分段数据上传到服务器 uploadFile(reader.result, cuLoaded, function () { console.info(loaded: + cuLoaded + current: + loaded); //如果没有读完，继续 cuLoaded += loaded; if (cuLoaded < total) {readBlob(cuLoaded); } else {console.log(总共用时： + (new Date().getTime() - startTime.getTime()) / 1000);cuLoaded = total; } }); } //指定开始位置，分块读取文件 function readBlob(start) { //指定开始位置和结束位置读取文件 //console.info(start: + start); var blob = file.slice(start, start + step); reader.readAsArrayBuffer(blob); } //开始读取 readBlob(0); //关键代码上传到服务器 function uploadFile(result, startIndex, onSuccess) { var blob = new Blob([result]); //提交到服务器 var fd = new FormData(); fd.append(file, blob); fd.append(filename, file.name); fd.append(loaded, startIndex); var xhr = new XMLHttpRequest(); xhr.open(post, ../ashx/upload2.ashx, true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) {// var data = eval(( + xhr.responseText + ));console.info(xhr.responseText);if (onSuccess) onSuccess(); } } //开始发送 xhr.send(fd); }}
后台代码：
/// public class upload2 : IHttpHandler{ LogHelper.LogHelper _log = new LogHelper.LogHelper(); int totalCount = 0; public void ProcessRequest(HttpContext context) { HttpContext _Context = context; //接收文件 HttpRequest req = _Context.Request; if (req.Files.Count <= 0) { WriteStr("获取服务器上传文件失败"); return; } HttpPostedFile _file = req.Files[0]; //获取参数 // string ext = req.Form["extention"]; string filename = req.Form["filename"]; //如果是int 类型当文件大的时候会出问题 最大也就是 1.9999999990686774G int loaded = Convert.ToInt32(req.Form["loaded"]); totalCount += loaded; string newname = @"F:\JavaScript_Solution\H5Solition\H5Solition\Content\TempFile\"; newname += filename; //接收二级制数据并保存 Stream stream = _file.InputStream; if (stream.Length <= 0) throw new Exception("接收的数据不能为空"); byte[] dataOne = new byte[stream.Length]; stream.Read(dataOne, 0, dataOne.Length); FileStream fs = new FileStream(newname, FileMode.Append, FileAccess.Write, FileShare.Read, 1024); try { fs.Write(dataOne, 0, dataOne.Length); } finally { fs.Close(); stream.Close(); } _log.WriteLine((totalCount + dataOne.Length).ToString()); WriteStr("分段数据保存成功"); } private void WriteStr(string str) { HttpContext.Current.Response.Write(str); } public bool IsReusable { get { return true; } }
2.分段读取文件为blob ，并使用ajax上传到服务器，追加中止、继续功能操作
分段读取文件：
JS:
/** 分段读取文件为blob ，并使用ajax上传到服务器* 使用Ajax方式提交上传数据文件大小应该有限值，最好500MB以内* 原因短时间过多的ajax请求，后台会崩溃获取上传的分块数据为空* 取代方式，长连接或WebSocket*/var fileBox = document.getElementById(file);var reader = null; //读取操作对象var step = 1024 * 1024 * 3.5; //每次读取文件大小var cuLoaded = 0; //当前已经读取总数var file = null; //当前读取的文件对象var enableRead = true;//标识是否可以读取文件fileBox.onchange = function () { //获取文件对象 file = this.files[0]; var total = file.size; console.info("文件大小：" + file.size); var startTime = new Date(); reader = new FileReader(); //读取一段成功 reader.onload = function (e) { //处理读取的结果 var result = reader.result; var loaded = e.loaded; if (enableRead == false) return false; //将分段数据上传到服务器 uploadFile(result, cuLoaded, function () { console.info(loaded: + cuLoaded + ----current: + loaded); //如果没有读完，继续 cuLoaded += loaded; if (cuLoaded < total) {readBlob(cuLoaded); } else {console.log(总共用时： + (new Date().getTime() - startTime.getTime()) / 1000);cuLoaded = total; } //显示结果进度 var percent = (cuLoaded / total) * 100; document.getElementById(Status).innerText = percent; document.getElementById(progressOne).value = percent; }); } //开始读取 readBlob(0); //关键代码上传到服务器 function uploadFile(result, startIndex, onSuccess) { var blob = new Blob([result]); //提交到服务器 var fd = new FormData(); fd.append(file, blob); fd.append(filename, file.name); fd.append(loaded, startIndex); var xhr = new XMLHttpRequest(); xhr.open(post, ../ashx/upload2.ashx, true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) {if (onSuccess) onSuccess(); } else if (xhr.status == 500) {//console.info(请求出错， + xhr.responseText);setTimeout(function () { containue();}, 1000); } } //开始发送 xhr.send(fd); }}//指定开始位置，分块读取文件function readBlob(start) { //指定开始位置和结束位置读取文件 var blob = file.slice(start, start + step); reader.readAsArrayBuffer(blob);}//中止function stop() { //中止读取操作 console.info(中止，cuLoaded： + cuLoaded); enableRead = false; reader.abort();}//继续function containue() { console.info(继续，cuLoaded： + cuLoaded); enableRead = true; readBlob(cuLoaded);}
后台代码同上
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
在html中怎样可以做到下拉菜单提交后保留选中值不返回默认值
在html中怎样可以用超链接打开新窗口并且控制窗口属性
怎样使用a标签的href属性与onclick事件
HTML标签嵌套的详细规则
