在图片上传的时候,如果在不上传图片到服务器之前,能预先显示出选中的图片,这种用户体验是最好的。
文章参考
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); } });