如何用输入标签和jquery上传和回显多张图片

本文主要记录如何使用input tag和jquery来上传和显示多张图片，不涉及后端交互，会显示大致效果

翻译

让我们从头开始做一个这样的演示

第一步：

让我们首先改进我们的页面。默认的输入文件标签非常难看。让我们美化它。如果没有，可以百度一下，就是在外面设置一个框，把输入的不透明度设置为0，然后把外面的框设计成我们喜欢的风格。我只是随便做了一下。

近似的风格

或者放源代码，只讲效果，不放源代码的都是流氓

这是尸体

body div class=' uploadimg BTN ' id=' uploadimg BTN ' input class=' uploadimg ' type=' file ' name=' file ' multiple id=' file '/div/body这是css的样式。uploadImgBtn { width: 100px高度： 100像素；cursor:指针；相对位置：background : URL(' img/plus . png ')无重复；-webkit-background-size:封面；背景尺寸：封面；} .uploadImgBtn。uploadImg { position:绝对值；right : 0；top:0宽度： 100%；高度： 100%；opa city 3360 0；cursor:指针；}//这是用作回声的方框样式。pic { width: 100px高度： 100像素；} .pic img { width : 100%；高度： 100%；}代码量不多，那我们就分析一下如何让画面呼应；我知道有两种方法，一种是先上传到服务器，并返回图片的url，然后在页面上渲染；另一种方式是使用h5的FileReader对象直接在本地预览图片，用户确认后上传到服务器。

我们使用第二种形式。既然我们知道了这个想法，让我们开始编程吧

脚本$(文档)。ready(function(){//绑定一个click事件$ ('# uploadimgbtn ')。点击(function () {/* 1，先获取输入标签2，将change事件3绑定到输入标签，回显图片*///1，返回输入标签var $ input=$。//2.绑定change事件$ input.on ('change '，function(){//补充说明：因为我们将multiple属性设置为输入标记，所以可以一次上传多个文件。//获取所选图片的数量。var files=this.filesvar length=files.lengthConsole.log ('length '图片已选中')；//3，回声为(var I=0；一、长度；i ){ var fr=new FileReader()，div=document . create element(' div ')，img=document . create element(' img ')；div.className=' picfr . on load=function(e){ console . log('回显图片')img . src=this . result；div . appendchild(img)document . body . appendchild(div)；} fr.readAsDataURL(文件[I])；//读取文件} })})))/脚本代码的思路也可以说非常简单。首先，将click事件绑定到外部框，然后获取输入标记，将change事件绑定到输入标记，然后使用for循环显示获得的数据。for循环中有一个异步onload事件来呈现图片。我们来看看效果图。

翻译

我们选了三张照片，但只展示了一张。据说我们在for循环中创建了三个div和img，只显示了一张图片。肯定有问题。

我们仔细分析一下。正如我之前所说的，在for循环的echo中有一个异步事件。由于是异步的，所以有可能在for循环执行后会执行onload事件，导致我们设置的下标I值与预期结果不一致；那怎么解决呢？如果能形成一个功能范围，一次回显一个画面，我觉得可以解决。让我们试一试。我们的前端可以使用jquery的每一个方案，都自带回调函数，形成函数范围。让我们看看代码

脚本$(文档)。ready(function(){//绑定一个click事件$ ('# uploadimgbtn ')。点击(function () {/* 1，先获取输入标签2，将change事件3绑定到输入标签，回显图片*///1，返回输入标签var $ input=$。//2.绑定change事件$ input.on ('change '，function(){//补充说明：因为我们将multiple属性设置为输入标记，所以可以一次上传多个文件。//获取所选图片的数量。var files=this.filesvar length=files.lengthConsole.log ('length '图片已选中')；//3，echo $。每个(文件、函数(键、值){//每次只遍历一个图片数据var div=document . create element(' div ')、img=document . create element(' img ')；div.className=' picvar fr=new FileReader()；fr . on load=function(){ img . src=this . result；div . appendchild(img)；document . body . appendchild(div)；} fr.readAsDataURL(值)；})})})})/脚本正在查看运行效果

翻译

这一次，我们达到了预期的效果。结束了吗？绝对不是。当我们再次点击上传图片按钮时，我们肯定会覆盖上一个结果。那我们做生意的时候，这绝对不是我们想看到的。如何才能解决这个问题？它必须使用多个输入标签。怎么保证我们点击的时候是新加的输入标签？我的解决方案是这样的。我们清除了最后一个输入标签的id属性，并将这个属性添加到我们新生成的输入标签中。因为我们通过id绑定事件，所以我们可以为新生成的输入标记绑定事件，但是原始输入标记没有被选中，因为它没有id属性。让我们看看代码。

脚本$(文档)。ready(function(){//绑定一个click事件$ ('# uploadimgbtn ')。点击(function () {/* 1，先获取输入标签2，将change事件3绑定到输入标签，回显图片*///1，返回输入标签var $ input=$。Console.log($input)//2。绑定change事件$ input.on ('change '，function(){ console . log(this)//补充说明：因为我们将multiple属性设置为输入标记，所以可以一次上传多个文件。//获取所选图片的数量。var length=files.lengthConsole.log ('length '图片已选中')；//3，echo $。每个(文件、函数(键、值){//每次只遍历一个图片数据var div=document . create element(' div ')、img=document . create element(' img ')；div.className=' picvar fr=new FileReader()；fr . on load=function(){ img . src=this . result；div . appendchild(img)；document . body . appendchild(div)；} fr.readAsDataURL(值)；}) }) //4.我们从当前输入标记的id属性中移除$ input . removeattr(' ID ')；//让我们做个标记，然后给类添加一个类名，叫做testvar new input=' input class=' uploadimg test ' type=' file ' name=' file ' multiple id=' file '；$(这个)。追加($(NewInput))；})})/脚本

翻译

摘要

以上是如何使用input tag和jquery上传和显示多张图片，对大家都有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！