国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

ionic選擇多張圖片上傳的示例代碼

來源:懂視網 責編:小采 時間:2020-11-27 22:28:02
文檔

ionic選擇多張圖片上傳的示例代碼

ionic選擇多張圖片上傳的示例代碼:在上一篇博客ionic本地相冊、拍照、裁剪、上傳(單圖完全版) 中,跟大家分享了ionic項目選擇本地圖片、拍照、裁剪、上傳到服務器的內容,但是上一節的內容由于使用了Cordova的Camera插件進行了圖片選擇與拍攝,所以每次只能支持1張圖片的選擇與上傳。上一篇
推薦度:
導讀ionic選擇多張圖片上傳的示例代碼:在上一篇博客ionic本地相冊、拍照、裁剪、上傳(單圖完全版) 中,跟大家分享了ionic項目選擇本地圖片、拍照、裁剪、上傳到服務器的內容,但是上一節的內容由于使用了Cordova的Camera插件進行了圖片選擇與拍攝,所以每次只能支持1張圖片的選擇與上傳。上一篇

在上一篇博客ionic本地相冊、拍照、裁剪、上傳(單圖完全版) 中,跟大家分享了ionic項目選擇本地圖片、拍照、裁剪、上傳到服務器的內容,但是上一節的內容由于使用了Cordova的Camera插件進行了圖片選擇與拍攝,所以每次只能支持1張圖片的選擇與上傳。上一篇博客中的內容適合用于頭像情景。

在本節中,跟大家分享使用Corodva的ImagePicker插件,實現多圖選擇與上傳。廢話不多說,進入主題。

插件安裝

cordova plugin add corodva-plugin-imagepicker
cordova plugin add cordova-plugin-file-transfer

定義圖片選擇服務

angular.module('starter.services', [])
//配置單張圖片選擇
.factory('SelectPicture', function(UploadFile, Toast) {
 return {
 /**
 * 從圖庫選擇多張圖片
 */
 choosePictures: function() {
 window.imagePicker.getPictures(function(res){
 for(var i = 0; i < res.length; i++){
 UploadFile.uploadFile(res[i], "我的服務器接口地址");//傳遞自己的服務器接口地址
 }
 }, function(err){
 alert(err);
 }, {
 maximumImagesCount: 10, 
 quality: 80
 });
 }
 }
})

定義文件上傳服務

//文件上傳
.factory('UploadFile', function(Toast) {
 return {
 /**
 * 上傳文件到服務器
 *
 * @param fileUrl 文件路徑
 * @param server 服務器接口
 */
 uploadFile: function(fileUrl, server) {
 document.addEventListener("deviceready", onDeviceReady, false);
 function onDeviceReady() {
 var options = new FileUploadOptions();
 options.fileKey = "BeanYon";//后臺獲取文件的鍵值
 options.fileName = fileUrl.substr(fileUrl.lastIndexOf('/') + 1);
 options.mimeType = "image/jpeg";
 options.chunkedMode = false;

 var params = {};//這里可添加自定義參數
 options.params = params;

 var ft = new FileTransfer();
 ft.upload(fileUrl, 
 encodeURI(server), 
 success, 
 err, 
 options);
 }

 function success(r){
 Toast.show("圖片已經成功上傳");
 }

 function err(error){
 Toast.show("上傳頭像失敗,請確保網絡正常后再試");
 }
 }
 }
})

在Controller中調用

angular.module('starter.controllers', [])
.controller('UsedUploadCtrl', function($scope, SelectPicture) {
 /**
 * 選擇圖片并上傳
 */
 $scope.uploadImage = function(){
 SelectPicture.choosePictures($scope);
 }
})

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

ionic選擇多張圖片上傳的示例代碼

ionic選擇多張圖片上傳的示例代碼:在上一篇博客ionic本地相冊、拍照、裁剪、上傳(單圖完全版) 中,跟大家分享了ionic項目選擇本地圖片、拍照、裁剪、上傳到服務器的內容,但是上一節的內容由于使用了Cordova的Camera插件進行了圖片選擇與拍攝,所以每次只能支持1張圖片的選擇與上傳。上一篇
推薦度:
標簽: 圖片 上傳 代碼
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国产一级视频在线观看 | 色婷婷国产 | 国产成人一区二区三区影院免费 | 国产精品视频免费看 | 日韩 欧美 中文 | 欧美国产精品va在线观看 | 91精品国产综合久久久久久 | 日韩成人精品在线 | 一区二区三区福利 | 亚洲欧美国产精品第1页 | 欧美一区二区三区不卡免费 | 91国内精品久久久久免费影院 | 日日摸日日| 久久久精品一区二区三区 | 日韩欧美在线免费观看 | 黑人操穴| 一级a毛片免费观看久久精品 | 国产日韩欧美中文字幕 | 日韩欧美一区二区三区免费看 | 一区二区三区美女 | 偷拍亚洲欧美 | 国产免费播放 | 久久久久免费精品国产小说 | 日韩欧美国产另类 | 国产精品一区二区四区 | 亚洲欧洲日韩在线 | 亚洲欧美专区 | 国产精品久久久久久亚洲伦理 | 精品一区二区三区在线成人 | 国产一区二区三区欧美精品 | 欧美日韩精品一区二区视频在线观看 | 国产欧美综合一区二区 | 成人久久久精品乱码一区二区三区 | 日韩欧美在线观看 | 另类专区亚洲 | 美女视频黄全免费的 | 国产青草视频在线观看 | 欧美成人伊人久久综合网 | 国产精品精品视频 | 亚洲偷| 欧美第一精品 |