本文给出了一个例子来分享javascript html5上传多个文件的实现方法。具体内容如下。

HTML结构：

Class=' container '标签请选择一个图像文件：/labeinputtype=' file ' id=' file _ input ' multiple//div对了，这次上传的主要逻辑：

使用输入标签并选择type=file，记得带多个，否则只能单选输入绑定时的更改时间。关键是如何处理这个变更事件。使用H5新的文件阅读器接口读取文件，并将其编码为base64。之后，你会和后端的同学互动，玩JS代码。

window . onload=function(){ var input=document . getelementbyid(' file _ input ')；var结果，divif(FileReader的类型==='未定义'){result。innerhtml='抱歉，您的浏览器不支持file reader '；input.setAttribute('disabled '，' disabled ')；} else { input . addeventlistener(' change '，readFile，false)；} br//处理函数readFile(){ for(var I=0；ithis . files . length；i ){ if(！输入['值']。匹配(/)。jpg |。gif |。png |。BMP/I)){//确定上传文件返回提醒的格式('上传图片格式不正确，请重新选择')br } var reader=new file reader()；reader . readasdataurl(this . files[I])；reader . onload=function(e){ result=' div id=' result ' img src=' http : ' this . result ' ' alt=' '//div '；div=document . create element(' div ')；div.innerHTML=结果；document.getElementById('body ')。appendChild(div)；//插入dom树br}}}}上传多张图片。是这样实现的吗？

但是，不，这只是将图片转换为base64编码，然后在前端显示。一旦刷新，就什么都没有了。

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

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

然后把MD5文件发回后端，因为前端通常有上传后删除图片的操作，发回的目的是告诉后端确认那些图片是我们想要的，后端存储在数据库中。

告诉我如何与jquery交互。

函数readFile(){ var FD=new FormData()；for(var I=0；ithis . files . length；I){ var reader=new file reader()；reader . readasdataurl(this . files[I])；fd.append(i，this . files[I])；Br} $。Ajax ({url: " "，type:' post '，data3360fd，success 3360 function(data){ console . log(data)})} FormData也是H5的一个新界面，用来模拟表单控件的提交。最大的优点是可以提交二进制文件。

然后，在回调成功得到想要回的数据后，就可以把图片插入页面了，和之前的做法差不多~

最后渲染：

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