后台代码：

public string SaveFile6() { //保存文件到根目录 App_Data + 获取文件名称和格式 var filePath = Server.MapPath("~/App_Data/") + Request.Form["fileName"]; //创建一个追加（FileMode.Append）方式的文件流 using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write)) { using (BinaryWriter bw = new BinaryWriter(fs)) { //读取文件流 BinaryReader br = new BinaryReader(Request.Files[0].InputStream); //将文件留转成字节数组 byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length); //将字节数组追加到文件 bw.Write(bytes); } } return "保存成功"; }

相对而言，代码量多了一点，复杂了一点。不过相对于网上的其他分片上传的代码应该要简单得多（因为这里没有考虑多文件块同时上传、断点续传。那样就需要在后台把文件块排序，然后上传完成按序合并，然后删除原来的临时文件。有兴趣的同学可以自己试试，稍候在分析上传插件webuploader的时候也会实现）。
效果图：

【说明】：如果我们想要上传多个文件怎么办？其实H5中也提供了非常简单的方式。直接在input里面标记multiple，<input type="file" id="file6" multiple>，然后我们后台接收的也是一个数组Request.Files。

使用HTML5 拖拽、粘贴上传

只能说H5真是强大啊，权限越来越大，操作越来越牛逼。
前端代码（拖拽上传）：

<textarea class="divFile7" style="min-width:800px;height:150px" placeholder="请将文件拖拽或直接粘贴到这里"></textarea> //方式7 $(".divFile7")[0].ondrop = function (event) { event.preventDefault();//不要执行与事件关联的默认动作 var files = event.dataTransfer.files;//获取拖上来的文件 //以下代码不变 var formData = new FormData();//初始化一个FormData对象 formData.append("files", files[0]);//将文件塞入FormData $.ajax({ url: "/Home/SaveFile2", type: "POST", data: formData, processData: false, // 告诉jQuery不要去处理发送的数据 contentType: false, // 告诉jQuery不要去设置Content-Type请求头 success: function (responseText) { alert(responseText); } }); };

后台代码：
略（和之前的SaveFile2一样）

前端代码（粘贴上传 限图片格式）：

//方式8 $(".divFile7")[0].onpaste = function (event) { event.preventDefault();//不要执行与事件关联的默认动作 var clipboard = event.clipboardData.items[0];//剪贴板数据 if (clipboard.kind == 'file' || clipboard.type.indexOf('image') > -1) {//判断是图片格式 var imageFile = clipboard.getAsFile();//获取文件 //以下代码不变 var formData = new FormData; formData.append('files', imageFile); formData.append('fileName', "temp.png");//这里给文件命个名（或者直接在后台保存的时候命名） $.ajax({ url: "/Home/SaveFile8", type: "POST", data: formData, processData: false, // 告诉jQuery不要去处理发送的数据 contentType: false, // 告诉jQuery不要去设置Content-Type请求头 success: function (responseText) { alert(responseText); } }); } };

后台代码：

public string SaveFile8() { //保存文件到根目录 App_Data + 获取文件名称和格式 var filePath = Server.MapPath("~/App_Data/") + Request.Form["fileName"]; if (Request.Files.Count > 0) { Request.Files[0].SaveAs(filePath); return "保存成功"; } return "没有读到文件"; }

效果图：

上传插件（WebUploader）

已经列举分析了多种上传文件的方式，我想总有一种适合你。不过，上传这个功能比较通用，而我们自己写的可能好多情况没有考虑到。接下来简单介绍下百度的WebUploader插件。
比起我们自己写的简单上传，它的优势：稳定、兼容性好（有flash切换，所以支持IE）、功能多、并发上传、断点续传（主要还是靠后台配合）。
官网：
插件下载：https://github.com/fex-team/webuploader/releases/download/0.1.5/webuploader-0.1.5.zip
下面开始对WebUploader的使用
第一种，简单粗暴
前端代码：

<div id="picker">选择文件</div> <button id="ctlBtn" class="btn btn-default">开始上传</button> <!--引用webuploader的js和css--> <link href="~/Scripts/webuploader-0.1.5/webuploader.css" rel="stylesheet" /> <script src="~/Scripts/webuploader-0.1.5/webuploader.js"></script> <script type="text/javascript"> var uploader = WebUploader.create({ // (如果是新浏览器 可以不用 flash) //swf: '/Scripts/webuploader-0.1.5/Uploader.swf', // 文件接收服务端。 server: '/Webuploader/SaveFile', // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#picker' }); $("#ctlBtn").click(function () { uploader.upload(); }); uploader.on('uploadSuccess', function (file) { alert("上传成功"); }); </script>