预加载上传图片uploadPreview

来源：互联网发布：iphone4优化越狱编辑：程序博客网时间：2024/06/01 18:54

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

文章参考

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);   }});

0 0