Ionic 选择图片上传
2024-10-02 20:45:41
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);
}
最新文章
- HDU 1556 线段树或树状数组,插段求点
- Linux:添加永久路由
- [HDU 5113] Black And White (dfs+剪枝)
- 绘制dot 图
- angular js 表单验证
- [zoj 3774]Power of Fibonacci 数论(二次剩余 拓展欧几里得 等比数列求和)
- webpack 理解
- SQL Server中varchar和nvarchar的区别
- 搭建 springboot 2.0 mybatis 读写分离 配置区分不同环境
- ffdshow 源代码分析 9: 编解码器有关类的总结
- Spring Boot的Listener机制的用法和实现原理详解
- 函数式编程之 Python
- fatal error C1859 意外的预编译头错误,只需重新运行编译器(转)
- LightOJ 1151 Snakes and Ladders(概率DP + 高斯消元)
- linux命令学习之:ls
- laravel框架一次请求的生命周期
- Oracle EBS R12 客户表结构
- 跟踪分析Linux内核的启动过程--20135334赵阳林
- bzoj千题计划142:bzoj3144: [Hnoi2013]切糕
- mysql-elastic search canal