注意：上述item.LocalFileName为 E:\Documents\Visual Studio 2013\Projects\WebAPiReturnHtml\WebAPiReturnHtml\upload\BodyPart_fa01ff79-4a5b-40f6-887f-ab514ec6636f ，因为此时我们重新命名了文件名称，所以需要将该文件移动到我们重新命名的文件地址。
整个过程就是这么简单，下面我们来看看演示结果。
此时居然出错了，有点耐人寻味，在服务端是返回如下的Json字符串
复制代码 代码如下:
List<string> savedFilePath = new List<string>();
此时进行反序列化时居然出错，再来看看页面上的错误信息：
无法将字符串转换为List<string>，这不是一一对应的么，好吧，我来看看返回的字符串到底是怎样的，【当将鼠标放上去】时查看的如下：
【当将点击查看】时结果如下：
由上知点击查看按钮时返回的才是正确的json，到了这里我们发现Json.NET序列化时也是有问题的，于是乎在进行反序列化时将返回的字符串需要进行一下处理转换成正确的json字符串来再来进行反序列化，修改如下：
var m = result.Content.ReadAsStringAsync().Result; m = m.TrimStart('\"'); m = m.TrimEnd('\"'); m = m.Replace("\\", ""); var list = JsonConvert.DeserializeObject<List<string>>(m);
最终在页面显示如下：
到这里我们的同步上传告一段落了，这里面利用Json.NET进行反序列化时居然出错问题，第一次遇到Json.NET反序列化时的问题，比较奇葩，费解。
异步上传
所谓的异步上传不过是利用Ajax进行上传，这里也就是为了复习下脚本或者Razor视图，下面的内容只是将视图进行了修改而已，对于异步上传我利用了jquery.form.js中的异步api，请看如下代码：
<script src="https://www.jb51.net/~/Scripts/jquery-1.10.2.min.js"></script> <script src="https://www.jb51.net/~/Scripts/jquery.form.js"></script> <script src="https://www.jb51.net/~/Scripts/bootstrap.min.js"></script> <link href="https://www.jb51.net/~/Content/bootstrap.min.css" /> <div> <div> <div role="alert"> <strong>上传成功</strong><span></span><a href="" target="_blank">文件访问地址</a> </div> </div> <div> <div role="alert"> <strong>上传失败</strong> </div> </div> </div> @using (Ajax.BeginForm("AsyncUpload", "Home", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data",@style="margin-top:10px;" })) { <div> <input type="file" /> </div> <div> <input type="submit" value="上传" /> </div> } <div> <div> <div>0%</div> </div> <div></div> </div> <style> .progress { position: relative; width: 400px; border: 1px solid #ddd; padding: 1px; } .progress-bar { width: 0px; height: 40px; background-color: #57be65; } </style> <script> (function () { var bar = $('.progress-bar'); var percent = $('.progress-bar'); $('form').ajaxForm({ beforeSend: function () { $("#progress").show(); var percentValue = '0%'; bar.width(percentValue); percent.html(percentValue); }, uploadProgress: function (event, position, total, percentComplete) { var percentValue = percentComplete + '%'; bar.width(percentValue); percent.html(percentValue); }, success: function (d) { var percentValue = '100%'; bar.width(percentValue); percent.html(percentValue); $('#fu1').val(''); }, complete: function (xhr) { if (xhr.responseText != null) { $("#linkAddr").prop("href", xhr.responseText); $("#success").show(); } else { $("#fail").show(); } } }); })(); </script>
我们截图看下其中上传过程
上传中：
上传完成：
当然这里的100%不过是针对小文件的实时上传，如果是大文件肯定不是实时的，利用其它组件来实现更加合适，这里我只是学习学习仅此而已。