html添加多张图片,input上传多张图片

　　序

　　今天我们来说说图片上传，单个还是多个。现在图片上传的插件数不胜数，比如jQuery的verupload.js，Jquery文件上传，Uploadify，jQuery.filter等等。但是.今天就不说上面提到的这些插件了。下面我们来看看如何在HTML5中使用FileReader实现单幅和多幅图片的预览、删除、上传等功能。我们来看看实施后的效果如下：

　　20实现

　　21前端部分

　　该按钮由用户点击。我们最重要的一个词是input type=file并给出了一个multiple属性，可以满足多张图片的上传。

　　Div= form-group form-row label class= col-sm-2 control-label u text club album/Div class= row Div class= col-xs-10 col-sm-8 mtop 5 label title= upload club album for= clubmimagesupport id= btnclubimg class= col-sm-2 input type= fil E accept= image/* name= clubmimagesupport id= clubmimagesupport class= hide multiple= multiple img

　　div class= form-group form-row id= preview more div class= row div class= col-xs-9 div id= clubInputImagePreview class= col-sm-9 img-preview img-preview-sm /div/div/div/div22样式部分

　　什么？连风格都要看，有没有人性(苦笑)

　　23Js部分

　　首先，我们来分析一下上面的html。我们使用一个标签来包装输入和一个img标签。我们希望通过点击效果图中带有那个数字的图片，弹出一个选择照片的对话框。因此，我们需要首先给标签一个点击事件：

　　$( # btncubimg )。click(function(){//TODO Something })；然后让我们来看一下，因为我们要获取上传的文件，我们的文件主要是在input上，所以让我们将input标记为：

　　$( # btncubimg )。click(function(){ var $ input=$( # clubiaimagesupload )；console . log($ input)；//打印当前元素})；让我们打印出当前输入元素的标签，看看它是什么。

　　当我们展开第一项时，我们会发现文件中的长度为0。

　　好，让我们继续分析，因为我们希望能够在输入框改变时获得当前选择的文件。简单地说，当对文件进行选择时，这与获得输入框文本输入是一样的。因此，经过分析，我们知道我们需要向输入标签添加一个变更事件：

　　$( # btncubimg )。click(function(){ var $ input=$( # clubiaimagesupload )；console . log($ input)；$input.on(change ，function(){ console . log(this))；//打印更改后的当前元素})；});让我们来看一看，看看更改后的输入元素中有什么：

　　这里可以清楚的看到，我们获得了选中的图像，包括最后的修改事件，图像名称，大小，图像类型(有了文件类型，就可以判断当前用户是否选中了一张图像(斜视))。同样，这是单个文件，如果有多个文件，就会有多个文件。

　　向下看，我们可以从打印输出中看到，我们已经在输入标记的files元素上获得了我们想要的文件信息。我们只需要得到它们：

　　var files=this.filesvar长度=files.length这样，我们就可以得到所有的文件和文件的数量。那么问题来了。如果我们选择多个文件，依次输出并显示在页面上会怎么样？看到上面标注的四个字，你脑子里有没有闪过两个字？传播

　　$.each(files，function (key，value){//TOTO Something })；通过循环上面得到的文件，我们可以依次得到每个文件的信息。这样不仅可以依次输出，喜欢的话还可以送上天~

　　var file reader=new fileReader()；//实例化一个FileReader对象var file _=files[key]；//获取当前文件if (/image \/\ w $/。测试(文件_。type)){//定期匹配当前文件看是否是选中的图片FileReader . onload=function(){//读取操作结束时调用}}需要扩展FileReader的知识：

　　FileReader主要用于将文件的内容读入内存。通过一系列异步接口，可以在主线程中访问本地文件。

　　使用FileReader对象，web应用程序可以异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容，并可以使用File对象或Blob对象来指定要处理的文件或数据。

　　回到主题，我们已经能够获取文件并将其取回，因此在这一点上，我们只需要显示返回的结果。

　　$(#clubInputImagePreview )。css(background-image ， URL( this . result ))；

　　让我们打印出这个结果，看看它是什么：

　　不用说，图像被转换成Base64的数据格式。最后，我们调用readAsDataURL来读取文件的内容，并用data:url字符串来表示。

　　fileReader.readAsDataURL(值)；

　　这样就可以得到一个简单的上传图片的Demo，但还不是最终的，因为还需要添加很多业务。比如得到一张预览图后，当前标签会被占用。如果在下一个循环中直接使用原标签，那么之前的图片肯定会被替换掉。那这肯定不是我们想要的效果。我们希望它能够依次展示，而不是被取代。所以，我们仍然需要做一些处理：

　　$(#clubInputImagePreview )。css(background-image ， URL( this . result ))；//使用apend在当前元素下追加子节点$ (# ClubinputImagePreview )。append( img src=/images/register newsite/BTN _ r _ del . png class= club image id= img remove /)；//使用after追加同级节点$ (# ClubinputImagePreview )。after( div ID= ClubinputImagePreview 1 class= col-sm-9 img-preview img-preview-smdelimg /div))；然后我们追加删除的图像，还需要给它一个click事件，使我们当前的预览区域消失：

　　$(#ImgRemove )。点击(function () { $(this)。父级()。移除()；});最后你会发现，结果并不是我们想要的。那是因为当前ID还在，所以无法进行下一步。相反，我们只需要删除当前元素的ID，然后添加一个具有相同ID的新元素，这样浏览器就会认为这是一个新元素：

　　$ input . remove attr( id )；var new input= input type= file accept= image/* name= clubmimagesupload id= clubmimagesupload class= hide multiple= multiple ；$(这个)。append($(new input))；最终的JS代码如下：

　　以上是边肖推出的Html5，实现单幅和多幅图片上传的功能。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读