jQuery插件-ajaxFileUpload

本文介绍了解决Ajax File Upload插件中handleError异常的方法,并提供了在上传后重新触发文件域change事件以更新视图的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用问题:1.ajax-fileupload.js handleError 异常由于本来handleError方法是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.文件域  

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




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值