预加载上传图片uploadPreview

在图片上传的时候,如果在不上传图片到服务器之前,能预先显示出选中的图片,这种用户体验是最好的。

文章参考

http://www.jq22.com/jquery-info2757

<div class="uploadPreviewContainer">
    <div id="imgdiv" class="float_left width_33">
        <img id="imgShow" width="120" height="120"/>
        <input type="file" id="up_img" />
    </div>
    <div class="clear_both"></div>
</div>
new uploadPreview({
   UpBtn: "up_img",
   DivShow: "imgdiv",
   ImgShow: "imgShow",
   callback: function(){
	//this 代表配置对象
	//console.dir(this);
	//用时间戳作为唯一标示
	var timeStamp = new Date().getTime();
	//模板就是HTML页面中的代码,如上面的代码部分
	var containerTemplate = '<div id="imgdiv'+timeStamp+'"class="float_left width_33"><img id="imgShow'+timeStamp+'"width="120"height="120"/><input type="file"id="up_img'+timeStamp+'"/></div>';
	//将代码动态的添加到HTML中,这样可以实现动态添加预览input控件
    $("#"+this.DivShow).after(containerTemplate);
	var targetSetting = {
			 UpBtn: "up_img"+timeStamp,
			 DivShow: "imgdiv"+timeStamp,
			 ImgShow: "imgShow"+timeStamp,
			 callback:this.callback
		  };
	//配置文件使用递归的方式来处理
	new uploadPreview(targetSetting);
   }
});

猜你喜欢

转载自hbiao68.iteye.com/blog/2317751
今日推荐