详解angularJS+Ionic移动端图片上传的解决办法


Posted in Javascript onSeptember 13, 2017

前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有一些冲突,所以我们可以自己写一个图片上传的方法。

今天的demo是帮朋友做的一个移动端微信公众号项目,项目架构采用angular+ionic,因为对dom的操作jQuery会方便很多,但是jQuery比较厚重,所以最后选择用轻量级的zepto来对项目dom进行操作。

项目中有一个需求是上传个人作品,实现功能需要H5新对象 FormData对象、XMLHttpRequest对象、FileReader对象。只需要这三个对象即可,话不多说上代码。

dom结构:

详解angularJS+Ionic移动端图片上传的解决办法

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)传递参数给接口。

到这个时候接口发送成功。

详解angularJS+Ionic移动端图片上传的解决办法

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

详解angularJS+Ionic移动端图片上传的解决办法

接口相应成功。

到这里有问题,图片上传成功写入数据库了,可是这时候需要在本地展示给用户看但是网页又不能直接访问设备本地的图片,因此我们需要FIleReader对象来对上传的图片文件读取为DataURL来展示在本地。

首先New 一个FileReader对象,然后将获取到的input file对象传入FileReader的 readAsDataURL()方法,此方法是将文件读取为DataURL的。

然后调用FileReader的onload方法,此方法的result会有转换之后的url,因此我们可以获取到此url,实际上是经过base64编码的。然后push到图片列表的最后

详解angularJS+Ionic移动端图片上传的解决办法

到此解决了问题,前端展示了本地的图片并且图片也写入了数据库,当页面再次刷新的时候拿到的是数据库中的数据

详解angularJS+Ionic移动端图片上传的解决办法

当然这里只是一个方法,移动端图片上传的插件比比皆是,甚至各种拖拽上传的图片上传插件也很多,此处适合项目中不用引入插件的图片上传的简单功能。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
koa-router源码学习小结
Sep 07 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
javascript自定义加载loading效果
Sep 15 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 #Javascript
Js利用Canvas实现图片压缩功能
Sep 13 #Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 #Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 #Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 #Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 #Javascript
js数组实现权重概率分配
Sep 12 #Javascript
You might like
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
python类参数self使用示例
2014/02/17 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
Django 路由层URLconf的实现
2019/12/30 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
python新手学习可变和不可变对象
2020/06/11 Python
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
电子信息专业应届生自荐信
2014/06/04 职场文书
2014年体育工作总结
2014/11/24 职场文书
个人典型事迹材料
2014/12/30 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle