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

　　图片也是上传前写的，但是是单页上传的。最近有个业务需求需要多次上传，所以重写了。

　　HTML结构：

　　XML/HTML代码复制内容到剪贴板divclass=container label请选择一个图片文件：/label input type= file id= file _ input multiple//div对了，这次上传的主要逻辑：

　　使用输入标签，选择type=file，记得带多个，否则只能单选选图。

　　更改绑定输入的时间，

　　重点是如何应对这个变化事件。使用H5新的FileReader接口读取文件，并将其输入base64代码。之后就可以和后端同学互动玩耍了。

　　JS代码：

　　代码将内容复制到剪贴板window . onload=function(){ var input=document . getelementbyid( file _ input )；varresult，divif(type of FileReader== undefined ){ result . innerhtml=对不起，您的浏览器不支持FileReader ；input.setAttribute(disabled ， disabled )；} else { input . addevent listener( change ，readFile，false)；} br//handler function readfile(){ for(vari=0；ithis . files . length；我){如果(！输入[值]。匹配(/。jpg 。gif 。png 。BMP/I)){/判断上传的文件格式returnalert(上传的图片格式不正确，请重新选择)br } varreader=new filereader()；reader . readasdataurl(this . files[I])；reader . onload=function(e){ result= divid= result img src= this . result alt= //div ；div=document . createelement( div )；div.innerHTML=resultdocument.getElementById(body )。appendChild(div)；//插入dom树br}}}}上传多张图片是这样实现的吗？0.0

　　然而，事实并非如此。它只是将图片转换成base64代码，然后显示在前端。一旦刷新，就什么都没有了。

　　插入图像后，打开开发者工具，可以看到这样的html结构

　　现实是我们在处理函数中把文件队列中的文件发送到后端，后端学生把MD5加密的文件和文件对应的路径返回到前端，前端取这个路径渲染到页面。

　　然后把MD5文件发回后端，因为一般上传后前端会删除图片。发回的目的是告诉后端确认那些图片是我们想要的，后端存储在数据库里。

　　我们来谈谈如何与jquery交互

　　代码将内容复制到剪贴板function readfile(){ varfd=new formdata()；for(vari=0；ithis . files . length；I){ varreader=new filereader()；reader . readasdataurl(this . files[I])；fd.append(i，this . files[I])；Br} $。Ajax ({URL: ，type: post ，data: FD，success:function(data){ console . log(data)})} FormData也是H5的新接口，用来模拟表单控件的提交。最大的好处是可以提交二进制文件。

　　然后我们在成功的回调中把想要的数据拿回来之后，就可以把图片插入到页面中了，类似前面的做法~

　　以前的效果图：

　　这就是本文的全部内容，希望对大家的学习有所帮助。

　　原文：http://www.cnblogs.com/weapon-x/p/5237064.html

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