jQuery插件之ajaxFileUpload

參考學習：

第一篇：http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html

第二篇：http://www.jb51.net/article/50518.htm

第三篇：http://zhangzhaoaaa.iteye.com/blog/2200065

使用方法：

　　第一步：先引入jQuery與ajaxFileUpload插件。註意先後順序，這個不用說了，所有的插件都是這樣。

    <script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script src="ajaxfileupload.js" type="text/javascript"></script>

我的control代碼如下：

 1 public ActionResult EditPhoto(EmployeeModelUser u)
 2         {
 3             string realpath = "";
 4             string ID = "";
 5 
 6             if (Session["ID"] != null)
 7             {
 8 
 9                 ID = this.HttpContext.Session["ID"].ToString();
10             }
11             u.ID = Convert.ToInt32(ID);
12 
13             if (u.Image != null && u.Image.ContentLength > 0)
14             {
15                 string ext = u.Image.FileName;
16                 u.PHOTONUMBER = ext;
17                 string path = "~/style/UserImages/" + ext;
18                 realpath = Server.MapPath(path);
19                 u.Image.SaveAs(realpath);
20             }
21             User user = new User();
22             user.ID = u.ID;
23             user.PHOTONUMBER = u.PHOTONUMBER;
24             employeemanage.SaveImage(user);
25             return Content(realpath);//realpath為文件存儲路徑
26         }

view代碼如下：

 1 <div class="new_portrait" id="Photo">
 2                      <div class="portrait_upload" id="portraitNo">
 3                               <span>上傳自己的頭像</span>
 4                           </div>
 5                           <div class="portraitShow dn" id="portraitShow">
 6                             <img width="120" height="120" src="<%=Url.Content("~/style/UserImages/"+Model.PHOTONUMBER) %>">
 7                             <span>更換頭像</span>
 8                               <input type="button"  value="上傳" />  
 9                           </div>
10                            
11                           <input type="file" value="" title="支持jpg、jpeg、gif、png格式，文件小於5M"  name="Image" id="Image" class="myfiles">
12                             <!-- <input type="hidden" id="headPicHidden" /> -->
13                               
14                               <span style="display:none;" id="headPic_error" class="error"></span>
15                 </div>
16                 <!--end .new_portrait-->

js代碼參考第一篇文獻的無參數的mvc例子

 1  $(function () {              //ajaxFileUpload上傳用戶頭像（我的簡歷中的基本信息模塊）
 2         $(":button[value='上傳']").click(function () {
 3             if ($(":file.myfiles").val().length > 0) {
 4                 ajaxFileUpload();
 5             }
 6             else {
 7                 alert("請選擇圖片");
 8             }
 9         })
10     })
11     function ajaxFileUpload() {
12         $.ajaxFileUpload
13         (
14             {
15                 url: '/Employee/EditPhoto', //用於文件上傳的伺服器端請求地址
16                 secureuri: false, //一般設置為false
17                 fileElementId: 'Image', //文件上傳空間的id屬性  <input type="file" id="Image" name="Image" />
18                 dataType: 'HTML', //返回值類型 一般設置為json
19                 success: function (data, status)  //伺服器成功響應處理函數
20                 {
21                     alert(data);
22                     $(":button[value='上傳']").replaceWith('<input type="button"  value="上傳" /> ');
23                     $(':file.myfiles').replaceWith('<input type="file" id="Image" name="Image" title="支持jpg、jpeg、gif、png格式，文件小於5M" class="myfiles"/>'); 
24                     //$("#img1").attr("src", "~/"+data);
25                 },
26                 error: function (data, status, e)//伺服器響應失敗處理函數
27                 {
28                     
29                 }
30             }
31         )
32         return false;
33     }

實現效果：