關於ajaxfileupload的使用方法以及一些問題


使用問題:

1.ajax-fileupload.js handleError 異常 由於本來handleError方法是jquery的方法,但jquery到了某個版本這個方法就去掉了沒有了

所以最簡單有效的方式就是在ajaxfileupload.js中添加上該方法, 方法如下:

著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
作者:卷貓
鏈接:http://anneke.cn/ArticleInfo/Detial?id=2
來源:Anneke.cn

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

視圖頁:

著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
作者:卷貓
鏈接:http://anneke.cn/ArticleInfo/Detial?id=2
來源:Anneke.cn

//綁定事件
     $("#文件上傳域的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格式的字符串

著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
作者:卷貓
鏈接:http://anneke.cn/ArticleInfo/Detial?id=2
來源:Anneke.cn

 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"));    
 
    }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM