写一个常用的模拟ajax上传文件的通用方法

假设现在有个按钮点击上传,那么直接在按钮上加上onclick事件写上对应的方法即可,比如这样

<a href="javascript:;" class="btnupload" onclick="imgcontro.selectFile('file','bin/upload.php','',function(data){game.uploaded(data)})"><img src="res/img/btn-upload.png"></a>

so easy,现在贴出来代码

var imgcontro = {
	selectFile:function(imgname,action,params,callback){
		var rand = parseInt(Math.random()*10000000000000),
			paramArr = params != "" ? params.split(","):[];

		$("form[id^='tmpForm_']").remove();

		$("body").append(
			'<form id="tmpForm_'+ rand +'" enctype="multipart/form-data" method="post" action="'+ action +'" target="tmpIframe_'+rand+'">'+
				'<input type="file" name="'+ imgname +'" style="display:none" onchange="imgcontro.upload(this,'+ rand +','+ callback +');">'+
				'<iframe style="display:none;" name="tmpIframe_'+ rand +'" id="tmpIframe_'+ rand +'"></iframe>'+
			'</form>'
		);
		var from = $("#tmpForm_"+rand),file = from.find('input[type="file"]');
		if(paramArr.length>0){
			for(var i = 0;i<paramArr.length;i++){
				var thisKey = paramArr[i].split(":")[0].split("{")[1],
				thisValue = paramArr[i].split(":")[1].split("}")[0];
				from.append('<input type="hidden" name="'+ thisKey +'" value="'+ thisValue +'">');
			}
		}
		file.click();
	},
	upload:function(obj,randcode,callBack){
		var object = $(obj),form = object.parent(),
			iframe = document.getElementById("tmpIframe_"+ randcode),
			getResStr,w_timer,jsonData,filepath = object.val(),
			extStart = filepath.lastIndexOf("."),
			ext = filepath.substring(extStart,filepath.length).toUpperCase(); 

		if(filepath == "" || filepath == null){
			alert("请先选择一张图片");
			return false;
		}
		if(ext!=".JPG"&&ext!=".JPEG"&&ext!=".GIF"&&ext!=".BMP"&&ext!=".PNG"){ 
			alert("仅限于上传 jpeg,jpg,png,bmp,gif 格式的文件");
	        return false;
	    }
		
		form.submit();
		loading.s();
		if (iframe.attachEvent) {
			iframe.attachEvent("onload", function() {
				getResStr = document.frames[iframe.id].document.body.innerHTML;
			});
			w_timer = setInterval(function(){
				if(getResStr != ""){
					clearInterval(w_timer);
					loading.h();
					callBack(getResStr);
				}
			},50);
		} else {
			iframe.onload = function() {
				getResStr = iframe.contentDocument.body.innerHTML;
				loading.h();
				callBack(getResStr);
			};
		}
	}
};

当然,为了体验更加友好,上传中的时候加个遮罩层和菊花,看起来不会以为是死机了,菊花代码在这,兼容手机端(jquery下,zepto暂时没解决兼容性问题)

var loading = {
	s:function(){
		$("#loading").show();
		$("#loading").animate({opacity:1}, 300)
	},
	h:function(){
		setTimeout(function(){
			$("#loading").animate({opacity:0}, 500,'',function(){$("#loading").hide();})
		},200);
	}
}
好了,下班回家了,做个笔记
本文链接:https://www.92ez.com/archives/23376/
!!! 转载请先联系non3gov@gmail.com授权并在显著位置注明作者和原文链接 !!! 小黑屋
提示:技术文章有一定的时效性,请先确认是否适用你当前的系统环境。

上一篇: js操作数组的一些实用方法 [转载]
下一篇: 写个脚本来搜索磁力链吧

访客评论
目前还没有人评论,您发表点看法?
发表评论

评论内容 (必填):