使用文件流的形式上传大文件
话不多说，直接上代码
前台：
1 <head runat="server"> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <title></title> 4 <script src="js/FileUpload.js"></script> 5 <script type="text/javascript"> 6 function InitUpload() { 7 var upload = Upload.create(); 8 upload.input = document.getElementById('file'); 9 upload.reqUrl = 'js上传大文件.aspx?method=UploadFile'; 10 upload.Init(); 11 } 12 </script> 13 </head> 14 <body> 15 <form id="form1" runat="server"> 16 <div> 17 <div> 18 <p>Large File Upload</p> 19 <input type="file" id="file" name="file" /> 20 </div> 21 </div> 22 <script type="text/javascript"> 23 InitUpload(); 24 </script> 25 </form> 26 </body>
js:
1 //AJAX大文件分片上传 2 3 var Upload = { 4 5 create: function () { 6 var upload = {}; 7 upload.chunks = []; //分片文件集合 8 upload.chunkSize = 1024 * 1024; //分片文件尺寸 9 upload.input = null; //页面中的File控件对象 10 upload.reqUrl = null; //请求url 11 12 //开始上传 13 upload.start = function (chunkIndex) { 14 var xhr = new XMLHttpRequest(); 15 xhr.open("POST", this.reqUrl + "&name=" + this.chunks[chunkIndex].name + "&index=" + chunkIndex); 16 xhr.overrideMimeType("application/octet-stream"); 17 18 xhr.onreadystatechange = function (e) { 19 if (xhr.readyState === 4) { 20 if (xhr.status === 200) { 21 if (xhr.response === "success") { 22 chunkIndex++; 23 if (chunkIndex >= upload.chunks.length) { 24 upload.chunks = []; 25 alert('文件上传完成'); 26 } 27 else { 28 upload.start(chunkIndex); 29 } 30 } 31 } 32 } 33 } 34 35 var reader = new FileReader(); 36 reader.onload = function (e) { 37 xhr.send(this.result); 38 } 39 reader.readAsArrayBuffer(this.chunks[chunkIndex].chunk); 40 } 41 42 //初始化 43 upload.Init = function () { 44 if (!!this.input && !!this.reqUrl) { 45 this.input.onchange = function (e) { 46 var file = upload.input.files[0]; 47 if (!!file) { 48 var start = 0; 49 var end = 0; 50 var chunkCount = Math.ceil(file.size / upload.chunkSize); 51 for (var i = 0; i < chunkCount ; i++) { 52 if ((file.size - start) >= 1 && (file.size - start) <= upload.chunkSize) 53 end = file.size; 54 else 55 end = start + upload.chunkSize; 56 57 var chunk = { 58 name: file.name, 59 chunk: file.slice(start, end), 60 } 61 upload.chunks.push(chunk); 62 start = end; 63 } 64 upload.start(0); 65 } 66 } 67 } 68 } 69 70 return upload; 71 } 72 };
.aspx:
protected void Page_Load(object sender, EventArgs e) { object param = Request.Params["method"]; if (param != null) { switch (param.ToString()) { case "UploadFile": UploadFile(); break; } } } private void UploadFile() {
//获取文件 string fileName = Request.Params["name"].ToString();
//获取文件索引 int index = int.Parse(Request.Params["index"]);
//设置文件上传路径 string filePath = Server.MapPath("Files") + "/" + fileName; if (index == 0) {
//判断文件是否存在 if (File.Exists(filePath)) File.Delete(filePath); } using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write)) {
//获取文件大小 byte[] Buff = new byte[Request.ContentLength]; Request.GetBufferedInputStream().Read(Buff, 0, Request.ContentLength); fs.Write(Buff, 0, Request.ContentLength); } Response.Write("success"); Response.End(); }
有道无术，术尚可求，有术无道，止于术
