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

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

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

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

赞 (0)

相关推荐

  • 详解angularjs popup-table 弹出框表格指令

    本文主要介绍了angularjs popup-table 弹出框表格指令,分享给大家,具体如下: //表格处理 app.directive('popupTable', ['$http', '$rootScope', '$cookies', '$location', function ($http, $rootScope, $cookies, $location) { return { restrict: 'E', templateUrl: 'popuptable_templete.html',

  • AngularJs 延时器、计时器实例代码

    1.$timeout延时器 apptest.controller("main",function($scope,$timeout){ $scope.pink="pink"; $scope.box="第二个盒子"; $timeout(function(){ $scope.pink="第一个盒子内容,延迟两秒后改变了"; },2000); setTimeout(function(){ $scope.pink="第一个盒子

  • AngularJS 仿微信图片手势缩放的实例

    AngularJS 仿微信图片手势缩放的实例

    AngularJS 仿微信图片手势缩放的实例 前言: 最近,公司做一个混合应用项目,涉及到一个图片缩放功能,类似微信那样支持touch事件. 亲测,实现方案很不错,所以放出来,和大家分享一下,希望有人能用得到. 核心思想就是用到了CSS3的transform属性, 不多说,我们看代码: 'use strict'; /** * @ngInject */ module.exports = function () { var _directive = { restrict : 'A', scope :

  • angularjs实现简单的购物车功能

    本文实例为大家分享了angularjs实现购物车功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; margin-left: 10px; } li{ list-

  • 基于AngularJS的简单使用详解

    Angular Js 的初步认识和使用 一: 1.模块化 定义模块和控制器 ng-app="myapp" controller="myctrl" 指定模型 ng-model="" 获取的属性值: ng-bind="属性名"或者{{属性名}} 2.初始化模块(在Script中进行) var myapp1 =angular.module("myapp",[]); 3.定义模块的控制器,并依赖注入, $scope

  • AngularJS 打开新的标签页实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html ng-app="myPro"> <head> <meta charset="UTF-8"> <title>angularJS-打开新的标签页</title> <script type="text/javascript" src="js/angular.min.js

  • Angularjs实现上传图片预览功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <input type="file" ng-file-select="onFileSelect($files)" accept="image/*"> app.factory("fileReader", function($q, $log) { var onLoad = function(reader, deferred, scope) { return func

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

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

    前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有一些冲突,所以我们可以自己写一个图片上传的方法. 今天的demo是帮朋友做的一个移动端微信公众号项目,项目架构采用angular+ionic,因为对dom的操作jQuery会方便很多,但是jQuery比较厚重,所以最后选择用轻量级的zepto来对项目dom进行操作. 项目中有一个需求是上传个人作品,

  • 详解angularJS动态生成的页面中ng-click无效解决办法

    今天碰到了一个这样的需求,在自己写的动态的页面中,写入的AngularJS无效不能点击响应事件,以下给出代码以及解决方案 1.首先将我们要赋值给页面的数据new一下 var html = "<a href='javascript:void(0);' ng-click='test()'></a>" 2.用$compile函数编译一下上边的内容 var $html = $compile(html)($scope); 3.将编译好的内容插入到页面中 $("b

  • jQuery移动端图片上传组件

    本文实例为大家分享了移动端图片上传组件,供大家参考,具体内容如下 Imageupload 使用File API+canvas 客户端压缩图片,并实现文件上传服务端 文件依赖 JQUERY 参数API loading:'.loading', 页面显示loading的图标selector url:'', 接收数据的api接口地址 maxFileSize:1010241024, 服务端支持的最大单文件大小 format:/^image/i, 支持的文件格式. images text ..... isC

  • Vue2.0 实现移动端图片上传功能

    本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none <input @change="fileChange($event)" type="file" id="upload_file" multiple

  • vue实现移动端图片上传功能

    vue实现移动端图片上传功能

    本文实例为大家分享了vue实现移动端图片上传的具体代码,供大家参考,具体内容如下 <template> <div class="box"> <div class="upDiv"> {{labTex}} //标题 //上传按钮 <input ref="uploadInput" type="file" class='upinp' name="file" value=&q

  • jQuery实现移动端图片上传预览组件的方法分析

    本文实例讲述了jQuery实现移动端图片上传预览组件的方法.分享给大家供大家参考,具体如下: 之前的一篇博客:移动端H5图片预览和压缩,实现了基本的功能.这次则计划做成一个组件,可供前台.后台使用. 首先,我们先来捋一捋想要实现的功能: 预览 删除 压缩 上传到服务器 基本机构 这样,我们的组件结构就有了: ;!function(window, $, undefined){ function Upload() { }; Upload.prototype.change = function() {

  • 基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能

    用Vue2实现移动端图片上传.压缩.拖拽排序.拖拽删除功能 图片上传图片压缩拖拽排序.拖拽删除 之前在公司开发过一段时间的移动端H5页面,有个功能就是要上传图片+压缩.参考了一下网上的方法,外加自己摸索的过程,最终实现了这个功能.后面在家闲的时候又加多了个长按选中图片,并且可以拖拽排序.拖拽到指定位置删除的功能. github地址:代码地址 下面直接进入正题: 图片上传 图片上传用的是HTML的input标签实现的.核心就是把获取到的文件通过FileReader转换成图片,代码如下: <inpu

  • 详解spring中aop不生效的几种解决办法

    先看下这个问题的背景:假设有一个spring应用,开发人员希望自定义一个注解@Log,可以加到指定的方法上,实现自动记录日志(入参.出参.响应耗时这些) package com.cnblogs.yjmyzz.springbootdemo.aspect; import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy

  • 详解安装sql2012出现错误could not open key...解决办法

    [前言] 之前由于小编的错误操作误删了注册表中的一项关于sql的内容,具体删了什么,也忘记了,当时是为了解决一个sql问题,问题没解决成,反而sql后来被弄得修复不了.装不上.卸载不了,无奈之下,出于当时正在准备面试事项,sql也不急着用,就一直没管,想用数据库做一些demo的时候,小编选择安装了一个mysql进行实践,近期小编要做一个图书管理系统平台,快速学习的方法就是看看别人是如何做的,然后分析他们的得失作为自己的经验,借鉴网上的成品后,想点点人家的系统,他们的系统用的是sqlserver,

  • 详解JSP中使用过滤器进行内容编码的解决办法

    详解JSP中使用过滤器进行内容编码的解决办法

    详解JSP中使用过滤器进行内容编码的解决办法 问题 当通过JSP页面,向数据库中插入记录的时候,可能因为JSP页面编码原因,导致插入到数据库中的新纪录出现乱码.因此需要对JSP页面中的内容进行编码操作,从而保证与数据库中的编码一致. 解决方案 使用JSP中过滤器进行处理.处理步骤如下 1.新建一个servlet,使其实现javax.servlet.Filter接口 2.修改Servlet/JSP Mapping URL ,将其改为 /EncodingFilter 3.在EncodingFilte

随机推荐