formdata-ajax上传图片,显示进度条

formdata相信小伙伴都知道,那么如何用ajax上传图片并且显示进度条呢?

楼主就直接给代码了

function uploadpro(valuepro){
		var schedulepro = "schedulepro" + valuepro;          //显示进度条id
		var uploadpro = "uploadpro" + valuepro;              //获取到上传按钮的id
		var imgidpro = "showpro" + valuepro;                 //获取到要显示图片的id
		var fileidpro = "imagepro" + valuepro;               //获取文件的id
		
		var formData = new FormData();
		formData.append("file",$("#"+fileidpro+"")[0].files[0]);
		
		$.ajax({
			type:"post",
			url:config.url+"/home/uploadFile?token="+window.sessionStorage.tokenbody,
			async:true,
			cache:false,
			data:formData,
			processData:false,
			contentType:false,
			dataType:"json",
			xhr: function(){
        		myXhr = $.ajaxSettings.xhr();
        		if(myXhr.upload){
          			myXhr.upload.addEventListener('progress',function(e){
	            		if(e.lengthComputable){
	              			var percent = Math.floor(e.loaded / e.total*100);
	              			$("#"+schedulepro+"").html('已上传:'+percent+'%');
	            		}
	          		}, false);
        		}
        		return myXhr;
    		},
			success:function(data){
				if(data.errcode == 0){
					layer.msg("上传成功");
					$("#"+uploadpro+"").attr("disabled",true);
	            	$("#"+imgidpro+"").attr("src",data.body);
				}
				if(data.errcode != 0 && data.errcode != 103){
					layer.msg(data.errmsg);
				}
	    		if(data.errcode == 103){
					layer.msg(data.errmsg+",将于2秒后自动跳转到登录页");
					setTimeout('window.location.href="../../../LxarMirage/login.html"',2000);
				}
			},
			error:function(){
				layer.msg("系统繁忙,请联系管理员");
			}
		});

	}

有什么不懂得可以直接私信楼主,由于上班,所以注释都没写

不过相信大家看得懂


阅读更多
个人分类: 我的前端啦
上一篇layer询问层,回调函数
下一篇layer.prompt输入层
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭