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

 更新时间:2017年09月13日 09:00:07   作者:雷厉风行L  
本篇文章主要介绍了详解angularJS+Ionic移动端图片上传的解决办法 ,具有一定的参考价值,有需要的可以了解一下

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

今天的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到图片列表的最后

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

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

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

相关文章

  • 深入浅析angular和vue还有jquery的区别

    深入浅析angular和vue还有jquery的区别

    vue是一个渐进式的框架, 是一个轻量级的框架而angular是一个mvc框架, 各有千秋,下面小编通过本文给大家介绍angular和vue还有jquery的区别,感兴趣的朋友一起看看吧
    2018-08-08
  • 关于AngularJS中几种Providers的区别总结

    关于AngularJS中几种Providers的区别总结

    这篇文章主要给大家介绍了关于AngularJS中几种Providers的区别的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用AngularJS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-05-05
  • ng2学习笔记之bootstrap中的component使用教程

    ng2学习笔记之bootstrap中的component使用教程

    现在angular2已经除了集成的angular-cli,建议大家可以基于这个来快速开发ng2的项目,不用自己再搭建环境。接下来通过本文给大家介绍 bootstrap中的component使用教程,需要的朋友可以参考下
    2017-03-03
  • BootStrap+Angularjs+NgDialog实现模式对话框

    BootStrap+Angularjs+NgDialog实现模式对话框

    在完成一个后台管理系统时,需要用表格显示注册用户的信息。但是用户地址太长了,不好显示。所以想做一个模式对话框,点击详细地址按钮时,弹出对话框,显示地址。下面小编给大家分享下实现方法,一起看下吧
    2016-08-08
  • angular2中使用第三方js库的实例

    angular2中使用第三方js库的实例

    下面小编就为大家分享一篇angular2中使用第三方js库的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 利用require.js与angular搭建spa应用的方法实例

    利用require.js与angular搭建spa应用的方法实例

    这篇文章主要给大家介绍了关于利用require.js与angular搭建spa应用的方法实例,文中通过示例代码给大家介绍的非常详细,对大家的理解和学习具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。
    2017-07-07
  • 解决AngualrJS页面刷新导致异常显示问题

    解决AngualrJS页面刷新导致异常显示问题

    本篇文章主要介绍了解决AngualrJS页面刷新导致异常显示问题的方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • AngularJS 模型详细介绍及实例代码

    AngularJS 模型详细介绍及实例代码

    本文主要介绍 AngularJS模型,这里详细介绍了AngularJS 模型中的知识点,并提供实例代码,有需要的小伙伴可以参考下
    2016-07-07
  • AngularJS教程之环境设置

    AngularJS教程之环境设置

    本文主要介绍AngularJS环境设置,学习AngularJS的朋友肯定要设置开发软件的环境,这里详细介绍安装设置流程,有需要的朋友可以参考下
    2016-08-08
  • AngularJS实现的根据数量与单价计算总价功能示例

    AngularJS实现的根据数量与单价计算总价功能示例

    这篇文章主要介绍了AngularJS实现的根据数量与单价计算总价功能,涉及AngularJS事件响应与数值运算相关操作技巧,需要的朋友可以参考下
    2017-12-12

最新评论