如何用输入标签和jquery实现多图片的上传和回显功能 - 行业资讯

本文主要记录如何用输入标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图

　　& lt; body> 　　& lt; div类=" uploadImgBtn " id=皍ploadImgBtn”比; 　　& lt;输入类=" uploadImg " type="文件" name="文件"多个id=拔募北? 　　& lt;/div> 　　& lt;/body> 　　　　

这是css的样式

　　　　　　.uploadImgBtn { 　　　　宽度:100 px; 　　身高:100 px; 　　光标:指针; 　　位置:相对; 　　背景:url (“img/plus.png”)不再重演; 　　-webkit-background-size:封面; 　　background-size:封面; 　　} 　　　　.uploadImgBtn .uploadImg { 　　位置:绝对的; 　　右:0; 　　上图:0; 　　宽度:100%; 　　高度:100%; 　　透明度:0; 　　光标:指针; 　　}//这是一个用做回显的盒子的样式　　.pic { 　　宽度:100 px; 　　身高:100 px; 　　} 　　.pic img { 　　宽度:100%; 　　高度:100%; 　　} 　　　　

代码的量并没有多少,接下来我们就分析一下如何让图片回显,我知道有两种方式,一种是先上传到服务器,并返回该图片的url,然后渲染在页面中;另一种呢,是利用仅有的FileReader对象直接在本地预览图片,用户确认后再上传服务器。

我们是采用第二种形式,既然知道了思路那就开始编程吧

　　　　　　& lt; script> 　　$(文档)时函数(){//为外面的盒子绑定一个点击事件　　$ (" # uploadImgBtn ") .click(函数(){/* 　　1,先获取输入标签　　2、给输入标签绑定改变事件　　3,把图片回显　　*///1,先回去输入标签　　var输入=美元(“#文件”);//2,给输入标签绑定改变事件　　输入美元。(“改变”,函数(){//补充说明:因为我们给输入标签设置多个属性,因此一次可以上传多个文件//获取选择图片的个数=this.files var文件; 　　var长度=files.length; 　　长度console.log(“选择了“+ +”张图片”);//3、回显　　(var=0;我& lt;长度;我+ +){ 　　var fr=new FileReader (), 　　div=document.createElement (" div "), 　　img=document.createElement (img); 　　div.className=巴计? 　　fr.onload=function (e) { 　　console.log(“回显了图片”) 　　img。src=https://www.yisu.com/zixun/this.result; 　　div.appendChild (img) 　　document.body.appendChild (div); 　　} 　　fr.readAsDataURL(文件[我]);//读取文件　　} 　　}) 　　}) 　　}) 　　　　　　

代码的思路也可以说是很简单,先给外面的盒子绑定点击事件,然后获取输入标签,给输入标签绑定改变事件,然后用一个为循环把获得的数据回显出来,为循环里有一个异步事件onload是用来渲染图片,来我们看看效果图

如何用输入标签和jquery实现多图片的上传和回显功能”>,
　　 效果图
　　我们选择了三张图片,却显示了一张,话说我们在为循环里创建了三个div和img却只显示了一张图片,这里面肯定有蹊跷。
　　我们来仔细分析一下,前面我已经说了,回显的为循环里面有一个异步事件,既然是异步的,可能的循环执行完了,才执行onload事件使我们设置的下标我值和预期的结果不一致,那我们如何解决呢,如果我们能形成一个函数作用域,在里面每次回显一张图片,我觉得我们就可能解决了。我们来尝试一下,我们前端可以使用jquery的每一方案,它自带回调函数,形成了函数作用域。我们看一下代码
　　
　　<pre类= 　　& lt; script> 　　$(文档)时函数(){//为外面的盒子绑定一个点击事件　　$ (" # uploadImgBtn ") .click(函数(){/* 　　1,先获取输入标签　　2、给输入标签绑定改变事件　　3,把图片回显　　*///1,先回去输入标签　　var输入=美元(“#文件”);//2,给输入标签绑定改变事件　　输入美元。(“改变”,函数(){//补充说明:因为我们给输入标签设置多个属性,因此一次可以上传多个文件//获取选择图片的个数=this.files var文件; 　　var长度=files.length; 　　长度console.log(“选择了“+ +”张图片”);//3、回显　　$ . each(文件、函数(关键字,值){//每次都只会遍历一个图片数据　　var div=document.createElement (" div "), 　　img=document.createElement (img); 　　div.className=巴计? 　　var fr=new FileReader (); 　　fr.onload=function () { 　　img.src=https://www.yisu.com/zixun/this.result; 　　div.appendChild (img); 　　document.body.appendChild (div); 　　} 　　fr.readAsDataURL(价值); 　　}) 　　}) 　　}) 　　})