独角兽企业重金招聘Python工程师标准>>>
参考学习：
第一篇：/kissdodog/archive//12/15/2819025.html
第二篇：/article/50518.htm
第三篇：/blog/2200065
第四篇：/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);//完整路径2223 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, //一般设置为false14 fileElementId: 'Image', //文件上传控间的id属性 <input type="file" id="Image" name="Image" />15 dataType: 'JSON', //返回值类型 一般设置为json16 success: function (data, status) //服务器成功响应处理函数17 {18//alert(data);//成功1920$("#PhotoNumber").attr("src",data);21//$("#PhotoNumber").attr(src,data);22 },23 error: function (data, status, e)//服务器响应失败处理函数24 {25alert('上传图片失败');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") {14alert("图片仅限于.gif .png .jpg .jpeg文件。");15return false;16 }17 else {18// 使用ajaxfileupload上传文件19$.ajaxFileUpload20 (21 {22 url: '/Employee/EditPhoto', //用于文件上传的服务器端请求地址23 type:'post',24 secureuri: false, //一般设置为false25 fileElementId: 'Image', //文件上传控间的id属性 <input type="file" id="Image" name="Image" />26 dataType: 'JSON', //返回值类型 一般设置为json27 success: function (data, status) //服务器成功响应处理函数28 {29alert(data);//成功3031$("#PhotoNumber").attr("src",data);32//$("#PhotoNumber").attr(src,data);33 },34 error: function (data, status, e)//服务器响应失败处理函数35 {36alert('上传图片失败');37 }38 }39 )40 }41 });42 }
实现效果：
不足：第二遍ajaxFileUpload开始，能够上传（更新）图片，不过view中的<img/>图片显示不出来（就是view的<img>的src获取不到），待解决求指点
