详解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 相关文章推荐
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 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
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
多文件上传的例子
2006/10/09 PHP
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
range 标准化之获取
2011/08/28 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
浅析Python中的序列化存储的方法
2015/04/28 Python
使用Python对MySQL数据操作
2017/04/06 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Python 中Pickle库的使用详解
2018/02/24 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
python中怎么表示空值
2020/06/19 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
软件测试企业面试试卷
2016/07/13 面试题
股权转让协议书范本
2014/04/12 职场文书
班组长安全工作职责
2014/07/15 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
先进党支部事迹材料
2014/12/24 职场文书
团员自我评价范文
2015/03/10 职场文书
股权投资协议书
2016/03/23 职场文书