2019獨角獸企業重金招聘Python工程師標準>>>

參考學習：

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

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

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

第四篇：http://blog.sina.com.cn/s/blog_6d3f840a0102vkpq.html ? （jQuery的ajaxFileUpload上傳文件插件刷新一次才能再次調用觸發change）

使用方法：

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

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

我的control代碼如下：

1 [HttpPost] 2 [ValidateInput(false)] 3 public ActionResult EditPhoto(EmployeeModelUser u)//上傳用戶頭像照片 4 { 5 string realpath = ""; 6 string returnpath = ""; 7 string ID = ""; 8 string path = ""; 9 if (Session["ID"] != null) 10 { 11 12 ID = this.HttpContext.Session["ID"].ToString(); 13 } 14 u.ID = Convert.ToInt32(ID); 15 16 if (u.Image != null && u.Image.ContentLength > 0) 17 { 18 string ext = u.Image.FileName; 19 u.PHOTONUMBER = ext; 20 path = "~/style/UserImages/User/" + ext; 21 realpath = Server.MapPath(path);//完整路徑 22 23 u.Image.SaveAs(realpath); 24 returnpath = "/style/UserImages/User/" + ext;//返回view中img顯示圖片的路徑 25 } 26 User user = new User(); 27 user.ID = u.ID; 28 user.PHOTONUMBER = u.PHOTONUMBER; 29 employeemanage.SaveImage(user); 30 //return Json(new { err = "", msg = ext },"text/x-json"); 31 return Content(returnpath);//文件存儲路徑 32 }

?

?

view代碼如下：

<div class="new_portrait" id="Photo"><div class="portrait_upload" id="portraitNo"><span>上傳自己的頭像</span></div><div class="portraitShow dn" id="portraitShow"><img width="120" height="120" id="PhotoNumber" src=""><span>更換頭像</span></div><input type="file" value="" title="支持jpg、jpeg、gif、png格式，文件小于5M" name="Image" accept="image/gif,image/jpeg,image/jpg,image/png" onchange="ajaxFileUpload()" id="Image" class="myfiles"><!-- <input type="hidden" id="headPicHidden" /> --><span style="display: none;" id="headPic_error" class="error"></span></div><!--end .new_portrait-->

?

js代碼第1種

?

1 $("#Image").live("ajaxFileUpload", function () { //<input type="file" id="Image" name="Image" onchange="ajaxFileUpload()" /> 2 ajaxFileUpload(); 3 $("#Image").replaceWith($("#Image").clone(true)); 4 //$("#PhotoNumber").replaceWith('<img width="120" height="120" id="PhotoNumber" src="">'); 5 }); 6 7 function ajaxFileUpload() { //ajaxFileUpload上傳用戶頭像（我的簡歷中的基本信息模塊）, <input type="file" id="Image" name="Image" onchange="ajaxFileUpload()" />成功 8 $.ajaxFileUpload 9 ( 10 { 11 url: '/Employee/EditPhoto', //用于文件上傳的服務器端請求地址 12 type:'post', 13 secureuri: false, //一般設置為false 14 fileElementId: 'Image', //文件上傳控間的id屬性 <input type="file" id="Image" name="Image" /> 15 dataType: 'JSON', //返回值類型 一般設置為json 16 success: function (data, status) //服務器成功響應處理函數 17 { 18 //alert(data);//成功 19 20 $("#PhotoNumber").attr("src",data); 21 //$("#PhotoNumber").attr(src,data); 22 }, 23 error: function (data, status, e)//服務器響應失敗處理函數 24 { 25 alert('上傳圖片失敗'); 26 } 27 } 28 ) 29 31 }

?

js代碼第2種

1 function uploadImageFunc() { 2 3 $("#Photo").change( 4 function(){ 5 // 獲取文件路徑 6 var filePath = $("input[name='Image']").val(); 7 // 獲取“.”位置 8 var extStart = filePath.lastIndexOf("."); 9 // 獲取文件格式后綴，并全部大寫 10 var ext = filePath.substring(extStart, filePath.length).toUpperCase(); 11 12 // 判斷文件格式 13 if (ext != ".BMP" && ext != ".PNG" && ext != ".JPG" && ext != ".JPEG") { 14 alert("圖片僅限于.gif .png .jpg .jpeg文件。"); 15 return false; 16 } 17 else { 18 // 使用ajaxfileupload上傳文件 19 $.ajaxFileUpload 20 ( 21 { 22 url: '/Employee/EditPhoto', //用于文件上傳的服務器端請求地址 23 type:'post', 24 secureuri: false, //一般設置為false 25 fileElementId: 'Image', //文件上傳控間的id屬性 <input type="file" id="Image" name="Image" /> 26 dataType: 'JSON', //返回值類型 一般設置為json 27 success: function (data, status) //服務器成功響應處理函數 28 { 29 alert(data);//成功 30 31 $("#PhotoNumber").attr("src",data); 32 //$("#PhotoNumber").attr(src,data); 33 }, 34 error: function (data, status, e)//服務器響應失敗處理函數 35 { 36 alert('上傳圖片失敗'); 37 } 38 } 39 ) 40 } 41 }); 42 }

?

?

?

實現效果：

?

?

?

? ?不足：第二遍ajaxFileUpload開始，能夠上傳（更新）圖片，不過view中的<img/>圖片顯示不出來（就是view的<img>的src獲取不到），待解決求指點

轉載于:https://my.oschina.net/landiljy/blog/630991

總結

以上是生活随笔為你收集整理的jQuery插件之ajaxFileUpload(异步上传图片并实时显示，并解决onchange后ajaxFileUpload失效问题)...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。