无刷新上传文件_.NET_编程开发_程序员俱乐部

这几天做的项目用到了文件上传，总结一下，加深一下印象吧。嘿嘿..........

1. 一个添加功能，需要上传图片，上代码。

 1 @{
 2             using (Ajax.BeginForm("Add", "PeopleManage", new AjaxOptions() { HttpMethod = "Post", OnSuccess = "afterAdd" },
 3                  new { id = "AddFrm", enctype = "multipart/form-data" }))
 4             {
 5             // ....................
 6                <tr>
 7                     <td>图标地址：</td>
 8                     <td id="iconTd" colspan="5">
 9                         <input id="iconUrl" type="text" name="IconUrl" />
10                         
11                         
12                         <input id="iconInput" type="file" name="iconImg"/>
13                         <input type="button" value="上传图片" id="btnUploadIconImg"/>
14                     
15                     </td>
16                 </tr>
17                 <tr>
18                     <td>
19                         图片预览 
20                     </td>
21                     <td id="iconYL" colspan="5">
22                         
23                     </td>
24                 </tr>
25               //...................
26             }
27 
28   }  

   mvc 异步提交表单，还有文件上传时最好加上enctype = "multipart/form-data" 这个属性。

 2. 前端触发事件 jquery 代码。

 1  //上传图片
 2         function bindImgUploadClick() {
 3             $("#btnUploadIconImg").click(function () {
 4                 //第一件事：判断文件input标签中有没有文件
 5                 if ($("#iconInput").val()) {
 6                     //让表单异步的提交到后台。
 7                     $("#iconYL img").remove();
 8                     $("#AddFrm").ajaxSubmit({
 9                         error: function (error) { alert(error); },
10                         url: '/PeopleManage/UploadImage', /*设置post提交到的页面*/
11                         type: "post", /*设置表单以post方法提交*/
12                         dataType: "text", /*设置返回值类型为文本*/
13                         success: function (data) {
14                            
15                             $("#iconUrl").val(data);
16                             $("#iconYL").append("<img id='IsUp' src='" + data + "' width='150px' heigth='80px' />");
17                             $("#iconInput").val("");
18                         }             
19                     });
20                 } else {
21                     $.messager.alert("错误消息", "请选择合法图片！");
22                 }
23             });
24         }

   这是个表单整体异步提交，需要一个MyAjaxForm.js文件。 success: 是成功后，后台返回的东东，可以返回图片路径，前台展示一下缩略图。

3. 后台上传的处理，代码献上。。
 

 1 #region 上传
 2 
 3         [HttpPost]
 4         public ActionResult UploadImage()
 5         {
 6             if (Request.Files["iconImg"] != null)
 7             {
 8                 var requestFile = Request.Files["iconImg"];
 9                 string Fname = requestFile.FileName;
10                 //获取文件扩展名
11                 string fileEx = Path.GetExtension(Fname);
12 
13                 if (fileEx == ".jpg" || fileEx == ".bmp" || fileEx == ".jpeg")
14                 {
15                     string imagePath = "/UploadFile/Images/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" +
16                                        DateTime.Now.Day + "/";
17 
18                     Directory.CreateDirectory(Server.MapPath(imagePath));
19 
20                     string fileName = imagePath + Guid.NewGuid().ToString() + Fname;
21 
22                     requestFile.SaveAs(Server.MapPath(fileName));
23 
24                     return Content(fileName);
25                 }
26 
27             }
28             return Content("上传失败");
29         }
30 
31         #endregion

 基本就这样勒，菜鸟一只，大家多多指教，多多交流奥 。。   O(∩_∩)O