ajaxfileupload 사용 및 몇 가지 질문에 대해-JS 튜토리얼-php.cn

ajaxfileupload 사용 및 몇 가지 질문에 대해

高洛峰

풀어 주다： 2016-12-12 17:51:05

원래의

1452명이 탐색했습니다.

사용 문제:

1.ajax-fileupload.js handlerError 예외. 원래 handlerError 메서드는 jquery 메서드였지만 jquery가 특정 버전에 도달하면 이 메서드가 제거되었습니다.

따라서 가장 간단하고 효과적인 방법은 ajaxfileupload.js에 이 메소드를 추가하는 것입니다.

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. 파일 도메인 변경 이벤트를 바인딩하여 매번 이미지를 서버에 업로드합니다. 그것을 선택하고 이미지 경로를 반환하면 브라우저가 이미지를 표시하게 하지만 변경 이벤트를 트리거한 후에는 변경 이벤트가 다음에 트리거되지 않습니다.

이유: ajaxFileUpload가 원본 파일 요소를 새 요소로 대체하기 때문입니다. 파일 요소, 이전에 바인딩된 변경 이벤트가 잘못되었습니다. 해결 방법: $.ajaxFileUpload({option})의 콜백 함수에서 변경 이벤트를 다시 바인딩합니다.

데모 사용

페이지 보기:

//绑定事件
     $("#文件上传域的ID").change(function () {
            UploadImg();
            });
 
    UploadImg = function() {    //判断内容是否为空
        if ($("#文件上传域的ID").val().length <= 0) {            return;
        };        //执行异步上传        $.ajaxFileUpload({
            url: &#39;@Url.Action("UploadHeadPhoto","UserInfo")&#39;, //用于文件上传的服务器端请求地址
            type: &#39;post&#39;,
            data: { id: $("#userId").val() },//自定义参数
            secureuri: false, //是否需要安全协议，一般设置为false
            fileElementId: &#39;文件上传域的ID&#39;, //文件上传域的ID
            dataType: &#39;json&#39;, //返回值类型 一般设置为json
            success: function(data) //服务器成功响应处理函数            {                //由于ajaxFileUpload把原来的file元素替换成新的file元素，所以之前绑定的change事件就失效了，需要重新绑定一下
                $("#文件上传域的ID").change(function () {
                    UploadImg();
                });        //Do something....            }
        });
    };

로그인 후 복사

컨트롤러: 프런트 엔드에서는 json 형식 데이터를 반환해야 하므로 여기서 json 형식 데이터를 반환해야 하며, 그러나 ajaxFileUpload 는 필수 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"));    
 
    }

로그인 후 복사