使用問題:
1.ajax-fileupload.js handleError 異常由於本來handleError方法是jquery的方法,但jquery到了某個版本這個方法就去掉了沒有了
所以最簡單有效的方式就是在ajaxfileupload.jsxfileupload.中加入上該方法, 方法如下:
handleError: function (s, xhr, status, e) { // If a local callback was specified, fire it if (s.error) { s.error.call(s.context || s, xhr, status, e); } // Fire the global callback if (s.global) { (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]); } },
2.文件域 綁定change事件,實現每次選擇圖片就上傳到伺服器,並返回圖片路徑,讓瀏覽器顯示圖片但觸發一次change事件後,下次就不會再觸發change事件
原因:由於ajaxFileUpload把原來的file元素替換成新的file元素,所以之前綁定的change事件就失效了, 解決方法:在 $.ajaxFileUpload({option})中的回調函數裡重新綁定change事件。
使用demo
視圖頁:
//绑定事件 $("#文件上传域的ID").change(function () { UploadImg(); }); UploadImg = function() { //判断内容是否为空 if ($("#文件上传域的ID").val().length <= 0) { return; }; //执行异步上传 $.ajaxFileUpload({ url: '@Url.Action("UploadHeadPhoto","UserInfo")', //用于文件上传的服务器端请求地址 type: 'post', data: { id: $("#userId").val() },//自定义参数 secureuri: false, //是否需要安全协议,一般设置为false fileElementId: '文件上传域的ID', //文件上传域的ID dataType: 'json', //返回值类型 一般设置为json success: function(data) //服务器成功响应处理函数 { //由于ajaxFileUpload把原来的file元素替换成新的file元素,所以之前绑定的change事件就失效了,需要重新绑定一下 $("#文件上传域的ID").change(function () { UploadImg(); }); //Do something.... } }); };
控制器: 由於前端要求返回的是json格式的數據,所以這裡要返回json格式數據, 但ajaxFileUpload,需要的json數據是字符串所以return Json().這裡不能使用,需要使用Newtonsoft.Json裡的方法序列化成json格式的字串
public ActionResult UploadHeadPhoto(HttpPostedFileBase uHeadPhoto,int id) { if (uHeadPhoto == null) { return Content(JsonConvert.SerializeObject(new { status = "no", msg = "上传头像不能为空" })); } /* 判断文件格式代码省略.....*/ uHeadPhoto.SaveAs(Request.MapPath("/HeadPhoto/1.jpg")); }