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

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

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

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

每天进步一点点

angularJS+Ionic移动端图片上传的解决办法的更多相关文章

  1. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  2. Linux无权限上传文件解决办法

    无权限上传文件解决办法 1.当前登录的普通用户:user1/password1 2.切换到管理员(user2)用户: sudo su - user2 输入user2用户的密码:password2 或者 ...

  3. Loadrunner上传文件解决办法(大文件)

    Loadrunner上传文件解决办法(大文件) 最近再做一个跟海量存储相关的项目测试,需要通过LR模拟用户大量上传和下载文件,请求是Rest或Soap,同时还要模拟多种大小尺寸不一的文件 通常情况下, ...

  4. HTML5移动端图片上传模块

    上传图片的功能是极为常用的,之前做过一个移动端上传文件的功能(基于jquery的),总结梳理一下. html <div class="uploadPic clearBox"& ...

  5. vue+axios实现移动端图片上传

    在利用vue做一些H5页面时,或多或少会遇到有图片上传的操作,主要是运用html5里面的input[type=file]来实现,传递到后端的数据是以二进制的格式传递,所以上传图片的请求与普通的请求稍微 ...

  6. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  7. Js 之移动端图片上传插件mbUploadify

    一.下载 https://pan.baidu.com/s/1NEL4tkHoK4ydqdMi_hgWcw 提取码:vx7e 二.Demo示例 <div class="weui_uplo ...

  8. vue移动端图片上传压缩

    上传压缩方法 import {api} from '../../api/api.js'; import axios from 'axios'; export function imgPreview ( ...

  9. angular封装七牛云图片上传,解决同一页面多个上传按钮分别上传

    step1:引入文件 引入Plupload *该SDK上传功能集于Plupload插件封装,所以需要下载Plupload; plupload.dev.js 引入qiniu.js为了简便,当时直接从官网 ...

随机推荐

  1. caffe数据读取的双阻塞队列说明

    caffe的datareader类中 class QueuePair { public: explicit QueuePair(int size); ~QueuePair(); BlockingQue ...

  2. 11. leetcode 283. Move Zeroes

    Given an array nums, write a function to move all 0's to the end of it while maintaining the relativ ...

  3. 使用纯css3写出来的表情包 (^v^)

    效果如图所示: 不多说,我们直接一个一个来写出,主要列出每个表情的结构,样式我们统一写出,基本全部会用到,颜色以及结构可以根据自己的需求来调整.(里面可是没有一张图片的哦) 页面预览:http://2 ...

  4. LinkStack

    //Node.h template<typename ElemType> struct Node { ElemType data; Node<ElemType> *next; ...

  5. 使用struct模块从定宽数据文件导入数据

  6. ETL作业调度工具TASKCTL的两个重大突破

    在传统设计理念下,流程图的可视化.作业流的定义设计功能,随着作业量增加,越来越难用,越来越不适用是一个难以避免的问题.就这两个问题,我给大家分享一下TASKCTL是如何转变思路.如何突破.如何带来一些 ...

  7. 在django中集成ckeditor富文本

    目前用的比较多的富文本插件有百度的ueditor.ckeditor.kindeditor等,其中ueditor和kindeditor比较美观,ckeditor的皮肤较少.但是ueditor加载较慢,k ...

  8. JS进阶 ] 分析JS中的异步操作

    写在前面 JS因为是单线程的,所以在执行事务的时候,往往会因为某个事务的延迟,而导致服务器假死,这时候异步编程就显的格外重要,但是异步编程一般理解为回调函数callback,典型的就是node,回调函 ...

  9. 深入理解Java 虚拟机阅读笔记(一)

    1.程序计数器- 占用空间:较小 作用:字节码行号指示器 作用详情:指示指令执行,如(字节码的执行,分支,循环,跳转,异常处理,线程恢复) 特点:线程私有(每个计数器独立计算,上下文相互独立). 2. ...

  10. ReactiveCocoa应用篇(二)

    上一篇介绍了ReactiveCocoa的常用类,已经基本满足项目中的简单应用要求,但是针对复杂的功能还需要其它的类来协同处理.ReactiveCocoa提供了强大的流程处理功能来解决复杂的问题,包括事 ...