最原始的方式:
前端代码:
<div> <span>最原始的方式</span><br /> <span>条件1:必须是 post 方式</span><br /> <span>条件2:必须注明是传输文件 enctype="multipart/form-data"</span><br /> <span>条件3:必须设置name属性,name="myFile"</span><br /> <form id="myForm1" method="post" enctype="multipart/form-data" action="http://localhost:42561/api/upload/upload"> <input type="file" name="myFile" /> <input type="submit" value="原始form表单上传文件" /> </form> </div>
后台代码:
public async Task<HttpResponseMessage> Upload() { var files = HttpContext.Current.Request.Files; var path = HttpContext.Current.Server.MapPath("/img/"); if (files.Count > 0) { foreach (string file in files) { //这里的 file ,就是 input[type="file"] 标签的name属性的值, //这也是为什么上传文件,input[type="file"] 标签必须设置name属性的值的原因之一. var img = files[file]; if (img?.ContentLength > 0) { var fileName = img.FileName; await Task.Run(() => img.SaveAs(path + fileName)); } } return new HttpResponseMessage(HttpStatusCode.OK); } return Request.CreateErrorResponse(HttpStatusCode.BadRequest, "没有文件"); }
利用FormData上传单个文件
前端代码:
<div> <span>利用FormData上传单个文件</span><br /> <form id="myForm2"> <input type="file" name="myFile" /> <input type="button" value="利用FormData上传单个文件" onclick="uploadOne()" /> </form> </div>
function uploadOne() { var url = "http://localhost:42561/api/upload/upload"; //这里之所以会写成[0],是因为$(...)是JQ对象,是个数组,而这里需要传入的是JS对象. var data = new FormData($("#myForm2")[0]); $.ajax({ url: url, data: data, type: "post", processData: false,//表示提交的时候不会序列化 data,而是直接使用 data,默认为 true contentType: false,//表示不要去设置Content-Type请求头 cache: false,//设置为 false 将不会从浏览器缓存中加载请求信息。 success: function () { } }); }
利用FormData上传多个文件
前端代码:
<div> <span>利用FormData上传多个文件</span><br /> <form id="myForm3"> <input type="file" id="myFile" multiple /> <input type="button" value="利用FormData上传多个文件" onclick="uploadSome()" /> </form> </div>
function uploadSome() { var url = "http://localhost:42561/api/upload/upload"; var data = new FormData(); var files = $("#myFile")[0].files; for (var i = 0; i < files.length; i++) { //这里的 myFile0,myFile1,myFile2就是input type="file" 标签的name属性,所以标签里面可以不用写name属性了 data.append("myFile" + i, $("#myFile")[0].files[i]); } $.ajax({ url: url, data: data, type: "post", processData: false, contentType: false, cache: false, success: function () { } }); }
分片上传
前端代码:
<div> <span>分片上传单个文件</span><br /> <form id="myForm4"> <input type="file" id="myFileStep" /> <input type="button" value="分片上传单个文件" onclick="uploadStep()"/> </form> <br /> <span class="result"></span> </div>
function uploadStep() { var upload = function (file, skip) { var data = new FormData(); var blockSize = 1000; var nextSize = Math.min((skip + 1) * blockSize, file.size); var fileData = file.slice(skip * blockSize, nextSize); data.append("myFile", fileData); //由于传输的是二进制数据(fileData),后台(MVC或者Api无法通过files[0].FileName获取文件名 //所以只能通过构造form表单数据传递(键值对形式,fileName=xxx.jpg&aaa=yyy),后台再通过request.Form[fileName]获取 data.append("fileName", file.name); var url = "http://localhost:42561/api/upload/uploadStep"; $.ajax({ url: url, type: "POST", data: data, processData: false, // 告诉jQuery不要去处理发送的数据 contentType: false, // 告诉jQuery不要去设置Content-Type请求头 success: function () { $(".result").html("已经上传了" + (skip + 1) + "块文件"); if (file.size <= nextSize) { //如果上传完成,则跳出继续上传 alert("上传完成"); return; } upload(file, ++skip); //递归调用 } }); }; var file = $("#myFileStep")[0].files[0]; upload(file, 0); }
后台代码:
public HttpResponseMessage UploadStep() { var path = HttpContext.Current.Server.MapPath("/img/"); var name = HttpContext.Current.Request.Form["fileName"]; var filePath = path + name; //创建一个追加(FileMode.Append)方式的文件流 using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write)) { var file = HttpContext.Current.Request.Files[0]; //方法一 using (BinaryWriter bw = new BinaryWriter(fs)) { //读取文件流 BinaryReader br = new BinaryReader(file.InputStream); //将文件流转成字节数组 byte[] bytes = br.ReadBytes((int)file.InputStream.Length); //将字节数组追加到文件 bw.Write(bytes); br.Dispose(); } //方法二 //Stream sm = file.InputStream; //byte[] bytes = new byte[sm.Length]; //sm.Read(bytes, 0, bytes.Length); //fs.Write(bytes, 0, bytes.Length); //sm.Dispose(); } return new HttpResponseMessage(HttpStatusCode.OK); }