前端开发经常会遇到图片上传的问题，在线解决方案很多。但是，一些用于图像上传的插件会附带一些插件。因此，由于图像上传的问题，可能需要在项目中引入其他插件。随着时间的推移，项目会不伦不类，有时候插件之间会有一些冲突，所以我们可以自己写一个图片上传的方法。

今天的演示是一个面向朋友的移动微信微信官方账号项目。项目架构采用angular ionic，因为jQuery操作dom方便很多，但是jQuery比较重，所以最终选择轻量级的zepto来操作项目dom。

项目中有上传个人作品的需求，需要H5新对象FormData对象、XMLHttpRequest对象和FileReader对象来实现该功能。只需要这三个对象，代码不多说了。

Dom结构：

Js结构：

功能1:

$ scope . IMglist=[]；$ scope . setuploader=function(){ var files=document . getelementbyid(' photo ')；files . click()；$(文件)。解除绑定()。on('change '，function(e){ var file=e . target . value；if(！/.(jpg | JPEG | png | gif | jpg | png) $/。test (file)) {common.toast('图片类型必须是JPEG、JPEG和png之一')；返回false};fsubmit()；readAsBinaryString()；});};功能2:

函数fsubmit(){ var Itemig={ }；var form=document . getelementbyid(' form 1 ')；console.log('form '，form)var form data=new form data(form)；formdata . append(' wxdesigner _ sid '，$ . fn . cookie(' wxdesigner _ sid '))；formData.append('id '，$ scope . masterinfo . id)；formData.append('pc '，' 1 ')；var OReq=new XMLHttpRequest()；oreq . onreadystatechange=function(){ if(oreq . readystate==4){ if(oreq . status==200){ var JSON=JSON . parse(oreq . responsetext)；console.log(json) if(json。成功){ itemImg=json。数据；$ scope.imgList=itemImgconsole . log($ scope . IMglist)$ scope。$ apply()；item IMg={ }；} } } };console . log(oReq)console . log(formData)oReq . open(' POST '，common . API ' Wxdesigner/Designer/uploadworks ')；oreq . send(formData)；返回false};//判断浏览器是否支持FileReader接口if(file reader的类型==' undefined '){//使所选控件不可操作file.setattribute ('disabled '，' disabled ')；}功能3:

函数readAsBinaryString(){ var file=document . getelementbyid(' photo ')。文件[0]；console . log(file)var reader=new file reader()；//以二进制形式将文件读入page reader.readAsDataURL(文件)；reader . onload=function(f){ $ scope . master info . thumb list . push(f . current target . result)console . log($ scope . master info)$ scope . apply()} }整个图片上传的dom层非常简单，一个表单表单加上一个触发表单的函数(function1)。在函数1中获取输入类型='file '的点击事件，在选择图片时会进行判断，如果超出支持的图片类型范围会给出提醒。

然后稍后调用函数2和函数3。

在函数2中获取表单对象，然后创建一个FormData对象，将获得的表单传递到FormData中，然后追加一些上传图片的参数。然后创建一个新的XMLHttpRequest对象，然后打开send XHR请求接口，send(formData)将参数传递给接口。

此时，接口发送成功。

这里的四个参数是formData中的四个参数

接口相应地成功了。

这里有一个问题。图片已成功上传并写入数据库，但此时需要在本地向用户显示，但网页无法直接访问设备的本地图片。因此，我们需要一个FIleReader对象来读取上传的图片文件，作为一个DataURL在本地显示。

首先一个FileReader对象是New，然后将得到的输入文件对象传递到FileReader的readAsDataURL()方法中，file reader以DataURL的形式读取文件。

然后调用FileReader的onload方法，这个方法的结果会有转换后的url，所以我们可以得到这个url，实际上是base64编码的。然后推到图片列表的末尾

为了解决这个问题，前端显示本地图片，图片也被写入数据库。当页面再次刷新时，将获得数据库中的数据

当然，这只是一种方法。移动终端上有很多上传图片的插件，甚至有很多拖拽上传图片的插件。这适合简单的上传图片的功能，不需要在项目中引入插件。

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