前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有一些冲突,所以我们可以自己写一个图片上传的方法。
今天的demo是帮朋友做的一个移动端微信公众号项目,项目架构采用angular+ionic,因为对dom的操作jQuery会方便很多,但是jQuery比较厚重,所以最后选择用轻量级的zepto来对项目dom进行操作。
项目中有一个需求是上传个人作品,实现功能需要H5新对象 FormData对象、XMLHttpRequest对象、FileReader对象。只需要这三个对象即可,话不多说上代码。
dom结构:
js结构:
function1:
$scope.imgList = []; $scope.setUploader = function () { var files = document.getElementById('photo'); files.click(); $(files).unbind().on('change',function (e) { var file = e.target.value; if (!/.(jpg|jpeg|png|GIF|JPG|png)$/.test(file)) { common.toast('图片类型必须是jpeg,jpg,png中的一种'); return false; }; fsubmit(); readAsBinaryString(); }); };
function2:
function fsubmit() { var itemImg = {}; var form=document.getElementById("form1"); console.log('form',form) var formData=new FormData(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.Success) { itemImg = json.Data; $scope.imgList=itemImg; console.log($scope.imgList) $scope.$apply(); itemImg = {}; } } } }; console.log(oReq) console.log(formData) oReq.open("POST", common.api+"Wxdesigner/Designer/uploadworks"); oReq.send(formData); return false; }; //判断浏览器是否支持FileReader接口 if(typeof FileReader == 'undefined'){ //使选择控件不可操作 file.setAttribute("disabled","disabled"); }
function3:
function readAsBinaryString(){ var file = document.getElementById('photo').files[0]; console.log(file) var reader = new FileReader(); //将文件以二进制形式读入页面 reader.readAsDataURL(file); reader.onload=function(f){ $scope.masterInfo.thumblist.push(f.currentTarget.result) console.log($scope.masterInfo) $scope.$apply() } }
整个图片上传的dom层很简单,一个form表单加上一个触发表单的函数(function1)。在function1中获取到<input type="file">的点击事件,在选择图片的时候会做个判断,如果超出支持的图片类型围的时候做个提醒。
然后在后面调用function2和function3。
在function2中获取form表单对象,然后创建一个FormData对象,将获取到的form表单传入FormData,然后append一些上传图片的参数。再创建一个new XMLHttpRequest对象,然后open发送XHR请求接口,send(formData)传递参数给接口。
到这个时候接口发送成功。
这里的四个参数是formData中的四个参数
接口相应成功。
到这里有问题,图片上传成功写入数据库了,可是这时候需要在本地展示给用户看但是网页又不能直接访问设备本地的图片,因此我们需要FIleReader对象来对上传的图片文件读取为DataURL来展示在本地。
首先New 一个FileReader对象,然后将获取到的input file对象传入FileReader的 readAsDataURL()方法,此方法是将文件读取为DataURL的。
然后调用FileReader的onload方法,此方法的result会有转换之后的url,因此我们可以获取到此url,实际上是经过base64编码的。然后push到图片列表的最后
到此解决了问题,前端展示了本地的图片并且图片也写入了数据库,当页面再次刷新的时候拿到的是数据库中的数据
当然这里只是一个方法,移动端图片上传的插件比比皆是,甚至各种拖拽上传的图片上传插件也很多,此处适合项目中不用引入插件的图片上传的简单功能。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]