首页 > 代码库 > 关于ajaxfileupload的使用方法以及一些问题

关于ajaxfileupload的使用方法以及一些问题

使用问题:

1.ajax-fileupload.js handleError 异常 由于本来handleError方法是jquery的方法,但jquery到了某个版本这个方法就去掉了没有了

所以最简单有效的方式就是在ajaxfileupload.js中添加上该方法, 方法如下:

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。作者:卷猫链接:http://anneke.cn/ArticleInfo/Detial?id=2来源:Anneke.cnhandleError: 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"));         }

 

关于ajaxfileupload的使用方法以及一些问题