About the use of ajaxfileupload and some questions-JS Tutorial-php.cn

About the use of ajaxfileupload and some questions

高洛峰

Release： 2016-12-12 17:51:05

Original

1451 people have browsed it

Usage issues:

1.ajax-fileupload.js handleError exception Since the handleError method was originally a jquery method, but jquery has removed this method after reaching a certain version

So the simplest and most effective way is to use ajaxfileupload.js Add this method, the method is as follows:

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]);
        }
    },

Copy after login

2. File domain Bind the change event, upload the image to the server every time you select it, and return the image path, let the browser display the image, but after triggering the change event once, the next time The change event will no longer be triggered

Cause: Since ajaxFileUpload replaces the original file element with a new file element, the previously bound change event will become invalid. Solution: in $.ajaxFileUpload({option}) Rebind the change event in the callback function.

Use demo

View page:

//绑定事件
     $("#文件上传域的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....            }
        });
    };

Copy after login

Controller: Since the front-end requires the return of json format data, json format data needs to be returned here, but ajaxFileUpload requires json data to be a string, so return Json(). It cannot be used here. You need to use the method in Newtonsoft.Json to serialize it into a string in json format

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

Copy after login