首页 / ANGULAR / angularJS+Ionic在移动端进行图片上传（附代码）

angularJS+Ionic在移动端进行图片上传（附代码）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了angularJS+Ionic在移动端进行图片上传（附代码），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3525字，纯文字阅读大概需要6分钟。

内容图文

这次给大家带来angularJS+Ionic在移动端进行图片上传（附代码），angularJS+Ionic在移动端进行图片上传的注意事项有哪些，下面就是实战案例，一起来看一下。

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

今天的demo是帮朋友做的一个移动端微信公众号项目，项目架构采用angular+ionic，因为对dom的操作jQuery会方便很多，但是jQuery比较厚重，所以最后选择用轻量级的zepto来对项目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到图片列表的最后

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

Vue-Router的滚动行为使用详解

Particles.js实现粒子动态背景动画

Vue-router的路由元信息使用详解

以上就是angularJS+Ionic在移动端进行图片上传（附代码）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的angularJS+Ionic在移动端进行图片上传（附代码）全部内容，希望文章能够帮你解决angularJS+Ionic在移动端进行图片上传（附代码）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/292134.html

来源：【匿名】