Ionic 选择图片上传
1.添加插件
1.1 安装ngcordova
1.2 安装选择图片插件
1.3 安装上传插件
1.4查看安装插件集合
2.html 代码
<div class="item item-icon-right">
<span>封面图片</span>
<i class="icon ion-images royal" data-tap-disabled="true" ng-click="taskFMpicker()"></i>
</div>
<div class="item item-body" >
<img class="full-image" ng-src="{{FMimage}}" />
</div>
<div class="item item-icon-right">
<span>图片相册</span>
<i class="icon ion-images royal" data-tap-disabled="true" ng-click="taskXCpicker()"></i>
</div>
<div class="row row-wrap item-calm" >
<div class="col col-50" ng-repeat="(k,v) in images"><img ng-src="{{v.imgurl}}" style="width:120px;height:120px; "/>
<p><button type="button" class="button button-small button-outline button-positive " ng-click="delimgs(v.imgurl)">删除</button></p></div>
<div >
</div>
</div>
3.controller 代码
//封面选择
$scope.taskFMpicker= function () {
var options = {
maximumImagesCount: 1,
width: 600,
height: 600,
quality: 80
};
$cordovaImagePicker.getPictures(options).then(function(results) {
var uri = results[0],
name = uri;
if (name.indexOf('/')) {
var i = name.lastIndexOf('/');
name = name.substring(i + 1);
}
$scope.FMimage = uri; $scope.uploadimage(uri,0);
}, function(error) {
alert(error);
});
}
//选择相册
$scope.taskXCpicker= function () {
var options = {
maximumImagesCount: 5,
width: 600,
height: 600,
quality: 80
};
$cordovaImagePicker.getPictures(options)
.then(function (results) {
for (var i = 0; i < results.length; i++) {
// console.log('Image URI: ' + results[i]);
$scope.images.push({"imgurl":results[i],id:0});
$scope.uploadimage(results[i],1) ;
}
}, function(error) {
// error getting photos
});
}
//上传图片
$scope.uploadimage = function(uri,type) {
var fileURL = uri;
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
var server=encodeURI(ENV.APIUrl+"/Upload/ImgUpload");
var ft = new FileTransfer(); $ionicLoading.show({
template: '上传中...'
}); ft.upload(fileURL, server,
function(data) {
// alert(JSON.stringify(data));
var resp = JSON.parse(data.response);
if(resp[0].status==1){
if(type==0){
$scope.FMImgeList.push(resp[0].filename);
//alert($scope.FMImgeList.join(','));
}
else{
$scope.XCImgeList.push("0"+"|"+resp[0].filename);
}
}
$ionicLoading.hide();
},
function(error) {
// alert(JSON.stringify(error));
$ionicLoading.hide();
}, options);
}
Ionic 选择图片上传的更多相关文章
- HTML5 Plus 拍照或者相册选择图片上传
HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...
- android拍照选择图片上传服务器自定义控件
做android项目的时候总免不了遇到图片上传功能,虽然就是调用android系统的拍照和相册选择功能,但是总面部了把一大推代码写在activity里,看上去一大推代码头都昏了.不如把这些功能都集成一 ...
- H5拍照、选择图片上传组件核心
背景 前段时间项目重构,改成SSR的项目,但之前用的图片选择上传组件不支持SSR(server-side-render).遂进行了调研,发现很多的工具.但有的太大,有的使用麻烦,有的不满足使用需求.决 ...
- html页面选择图片上传时实现图片预览功能
实现效果如下图所示 只需要将下面的html部分的代码放入你的代码即可 (注意引入jQuery文件和html头部的css样式,使用的是ajax提交) <!-- 需引入jQuery 引入样式文件 引 ...
- Ionic3学习笔记(十二)拍照上传图片以及从相册选择图片上传
本文为原创文章,转载请标明出处 目录 安装插件 导入 app.module.ts 创建 provider 更多 效果图 1. 安装插件 终端运行: ionic cordova plugin add c ...
- H5 选择图片上传及预览
<div class="sctp"> <img src="img/sczp.png" id="photo" alt=&qu ...
- 我需要在Web上完成一个图片上传的功能
我需要在Web上完成一个图片上传的功能. 这个页面需要能从手机中选择图片上传. 首先,这个页面是从微信上面触发的,所以修改了微信的的入口地址,增加了身份识别号作为传参. 跳转到页面的时候,页面先检查身 ...
- angularJS+Ionic移动端图片上传的解决办法
前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有 ...
- 微信小程序选择图片,查看图片信息,浏览图片,图片上传
依次点击链接请查看以下步骤 选择图片: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageob ...
随机推荐
- Windows exit
退出 CMD.EXE 程序(命令解释器)或当前批处理脚本. EXIT [/B] [exitCode] /B 指定要退出当前批处理脚本而不是 CMD.EXE.如果从一个 ...
- 携程的 Dubbo 之路
本篇文章整理自董艺荃在 Dubbo 社区开发者日上海站的演讲. 缘起 携程当初为什么要引入 Dubbo 呢?实际上从 2013 年底起,携程内主要使用的就是基于 HTTP 协议的 SOA 微服务框架. ...
- 阿里云SaaS加速器“宜搭”发布宜搭Plus提升6倍研发效率
9月26日,在杭州云栖大会上,阿里云SaaS加速器的“底座”——“宜搭”正式发布“宜搭Plus”低代码开发平台.开发复杂企业业务系统所需要的领域数据模型.逻辑&服务编排.专业UI页面设计等,都 ...
- day20 装饰器补充
Python之路,Day8 = Python基础8 装饰器from functools imoort wraps # 保留原函数所有信息,比如:用__doc__查看注释的时候,显示原来的注释def f ...
- python实现百度OCR图片识别
一.直接上代码 import base64 import requests class CodeDemo: def __init__(self,AK,SK,code_url,img_path): se ...
- js 过滤非法字符
demo = 'zhang#@$san'; reg=/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im; if(reg.test(demo)){ t ...
- hdu多校第四场1001 (hdu6614) AND Minimum Spanning Tree 签到
题意: 一个完全图,某两点边权为这两点编号之按位与,求最小生成树,输出字典序最小的. 题解: 如果点数不为$2^n-1$,则每一点均可找到一点,两点之间边权为0,只需找到该点二进制下其最左边的0是第几 ...
- Arcmap中处理面图层中空白碎片
在面数据中,有时候在一个面要素中会出现碎片,而我们大多时候不希望这些碎片存在(图1),下面介绍通过Editor工具把这些碎片处理掉.
- iOS之SceneKit.h文件简介
1.SceneKit简介 SceneKit(SK)是WWDC12推出的OS X平台的Cocos 3D渲染引擎框架.支持粒子效果,物理模拟,脚本事件,多程渲染,支持iOS平台.SceneKit整合了Co ...
- Android Support Library详细介绍
网上对Android Support Library中各个依赖包介绍的中文资料太少了,结合官方文档和有限的参考资料做了一次总结,有描述得不对的地方还请指正. 一.主工程.依赖包.jar包.androi ...