asp.net进行数据上传的时候，处理的方式有多种，数据后端接受数据，前台处理数据。但是有时候数据很大，上传的时候，我们需要分割处理，前台数据分割，后台上传接受数据，常用的插件有很多，想自己写个MVC上传的，前台显示上传进度的插架，查询资料写写代码如下：
服务端代码
MVC数据上传,服务端数据的处理方式，就是接受数据，整合数据，当然代码不完善，还有好多逻辑需要构思，但是核心代码在这。
[HttpPost] public ActionResult DoLoad(HttpPostedFileBase upimage, string test) { string filePhysicalPath = Server.MapPath("~/Upload/" + test); if (System.IO.File.Exists(filePhysicalPath)) { System.IO.Stream uploadStream = upimage.InputStream; System.IO.FileStream srtv = new System.IO.FileStream(filePhysicalPath, System.IO.FileMode.Append); int bufferLen = 1024; byte[] buffer = new byte[bufferLen]; int contentLen = 0; while ((contentLen = uploadStream.Read(buffer, 0, bufferLen)) != 0) { srtv.Write(buffer, 0, bufferLen); srtv.Flush(); } srtv.Close(); uploadStream.Close(); } else { upimage.SaveAs(filePhysicalPath); } //string filename = System.IO.Path.GetFileName(upimage.FileName); return Content("上传成功"); }
web：前台网页端对数据进行分割，单独模块提交后台数据；这里的js可以写成jquery库，也没来得及整理；
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>分割大文件上传</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #test { 200px; height: 100px; border: 1px solid green; display: none; } #img { 50px; height: 50px; display: none; } #upimg { text-align: center; font: 8px/10px '微软雅黑','黑体',sans-serif; 300px; height: 10px; border: 1px solid green; } #load { 0%; height: 100%; background: green; text-align: center; } </style> </head> <body> <form enctype="multipart/form-data" action="UpLoad/DoLoad" method="post"> <!-- <input type="file" name="pic" /> <div id="img"></div> <input type="button" value="uploadimg" onclick="upimg();" /><br /> --> <div id="upimg"> <div id="load"></div> </div> <input type="file" name="upimage" multiple="multiple" /> <input type="button" value="uploadfile" onclick="upfile();" /> <input type="submit" value="submit" /> </form> <div id="test"> 测试是否DIV消失 </div> <script type="text/javascript"> var dom = document.getElementsByTagName('form')[0]; dom.onsubmit = function () { //return false; } var xhr = new XMLHttpRequest(); var fd; var des = document.getElementById('load'); var num = document.getElementById('upimg'); var file; const LENGTH = 1 * 1024 * 1024; var start; var end; var blob; var pecent; var filename; //var pending; //var clock; function upfile() { start = 0; end = LENGTH + start; //pending=false; file = document.getElementsByName('upimage')[0].files[0]; //filename = file.name; if (!file) { alert('请选择文件'); return; } //clock=setInterval('up()',1000); up(); } function up() { /* if(pending){ return; } */ if (start < file.size) { xhr.open('POST', '../UpLoad/DoLoad', true); //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.onreadystatechange = function () { if (this.readyState == 4) { if (this.status >= 200 && this.status < 300) { if (this.responseText.indexOf('failed') >= 0) { //alert(this.responseText); alert('文件发送失败，请重新发送'); des.style.width = '0%'; //num.innerHTML=''; //clearInterval(clock); } else { //alert(this.responseText) // pending=false; start = end; end = start + LENGTH; setTimeout('up()', 1000); } } } } xhr.upload.onprogress = function (ev) { if (ev.lengthComputable) { pecent = 100 * (ev.loaded + start) / file.size; if (pecent > 100) { pecent = 100; } //num.innerHTML=parseInt(pecent)+'%'; des.style.width = pecent + '%'; des.innerHTML = parseInt(pecent) + '%' } } //分割文件核心部分slice blob = file.slice(start, end); fd = new FormData(); fd.append('upimage', blob); fd.append('test', file.name); //console.log(fd); //pending=true; xhr.send(fd); } else { //clearInterval(clock); } } function change() { des.style.width = '0%'; } </script> </body> </html>