写一个常用的模拟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);
	}
}