在ionic中用 ajaxfileupload.js 插件上传文件

 

1、定义一个file表单，并隐藏

<div class="item"><div class="">附件</div><div class=""><button class="button button-royal button-block" ng-click="uploadFile()">上传照片</button><input type="file" id="hiddenFileWidget"  name="img" class="absolute visibility_hidden" onchange="angular.element(this).scope().startUpload()"></div></div><input type="hidden" ng-model="formData.filePath">

 

注意事项：

1）、file控件在angular中没有所谓的“ng-change”事件，因此，只能使用“原生事件”

2）、onchange="angular.element(this).scope().startUpload()" 是将原生事件引入到对应的$scope链中。

 

2、逻辑controller(控制层)选择文件确认之后上传文件

 

//上传文件$scope.uploadFile = function(){$("#hiddenFileWidget").click();};//上传文件 action$scope.startUpload = function(){tipService.loading("正在上传图片");publicRepairService.uploadFileAction($scope);};

 

 备注：tipService.loading("正在上传图片")  的作用是弹出一个遮罩层，提示用户正在上传，并且防止图片没有上传完成就提交数据。

 

3、对应的服务service处理具体的接口，用户定义上传成功之后的回调函数

//上传文件function uploadFileAction(__scope__){var mysetting = {url : "/Repair/updateImg",fileElementId : "hiddenFileWidget",data: { "token":userInfoService.getUserKey()},"token":userInfoService.getUserKey(),//相当于java中try语句块的用法，这里data是你post后返回的结果，要与dataType类型匹配success: function (data, status)  {},//相当于java中catch语句块的用法error: function (data, status, e) {tipService.loadingHide();var responseData = eval('(' + data.responseXML.documentElement.innerText + ')');// $("#psersonImage").attr("src",responseData.data.avatar);if(responseData.status == 1){tipService.alert({title:"提示!",template:responseData.msg,callback:function(){if(__scope__.formData.filePath == "" || __scope__.formData.filePath == null || __scope__.formData.filePath == undefined){__scope__.formData.filePath = responseData.data;}else{__scope__.formData.filePath = __scope__.formData.filePath + "," +responseData.data;}}});}else if(responseData.status == 999){tipService.alert({title:"提示!",template:responseData.msg,callback:function(){//window.location.href="/wap/tmpl/member/login.html";}});}else{tipService.alert({title:"提示!",template:responseData.msg,callback:function(){}});}}};publicService.uploadFile(mysetting);}

 

备注：tipService.loadingHide();是隐藏遮罩层，允许用户操作。 

 

4、底层利用ajaxfileupload.js插件完成异步上传文件

 

/** 上传图片* */function uploadFile(mysetting){function startUpload(){$.ajaxFileUpload({url : WAP_CONFIG.path+mysetting.url, //需要链接到服务器地址secureuri : false, //是否使用安全方式 httpsfileElementId : mysetting.fileElementId, //文件选择框的id属性dataType: 'json', //服务器返回的格式，可以是xml，默认还是用js最喜欢的jsondata: mysetting.data,success: mysetting.success,  //相当于java中try语句块的用法，这里data是你post后返回的结果，要与dataType类型匹配error: mysetting.error //相当于java中catch语句块的用法});}//检测参数mysetting = mysetting || {};var defaultSetting = {url : "/Repair/updateImg",data : "",fileElementId : "",success : function(){},error:function(){}};//覆盖默认参数mysetting = $.extend(defaultSetting,mysetting);startUpload(mysetting);}

 

自定义弹出层工具服务

/** * 查询条件服务 * */angular.module('houseApp').factory('tipService', ["ApiService", "WAP_CONFIG","$ionicPopup","$ionicLoading",function(ApiService, WAP_CONFIG,$ionicPopup,$ionicLoading) {/** alert 弹出提示* */var promptPopupObj;function prompt(){var mysetting = mysetting || {};var defaultSetting = {template: '<input type="password" ng-model="data.wifi">',title: 'Enter Wi-Fi Password',subTitle: 'Please use normal things',scope: $scope,buttons: [{ text: 'Cancel' },{text: '<b>Save</b>',type: 'button-positive',onTap: function(e) {if (!$scope.data.wifi) {//不允许用户关闭，除非他键入wifi密码e.preventDefault();} else {return $scope.data.wifi;}}},]};mysetting = $.extend(defaultSetting,mysetting);promptPopupObj = $ionicPopup.show({template: mysetting.template,title:mysetting.title,subTitle:mysetting.subTitle,scope: mysetting.scope,buttons: mysetting.buttons});myPopup.then(function(res) {console.log('Tapped!', res);});}/** * 一个确认对话框 */var confirmPopupObj;function confirm(mysetting){var mysetting = mysetting || {};var defaultSetting = {title:"Don\'t eat that!",template:"It might taste good",sureCallback:function(){},falseCallBack:function(){}};mysetting = $.extend(defaultSetting,mysetting);confirmPopupObj = $ionicPopup.confirm({title: mysetting.title,template: mysetting.template});confirmPopupObj.then(function(res) {if(res) {mysetting.sureCallback();}else {mysetting.falseCallBack();}});}/** 一个提示对话框* */var alertPopupObj;function alert(mysetting){var mysetting = mysetting || {};var defaultSetting = {title:"Don\'t eat that!",template:"It might taste good",callback:function(){}};mysetting = $.extend(defaultSetting,mysetting);alertPopupObj = $ionicPopup.alert({title: mysetting.title,template: mysetting.template});alertPopupObj.then(function(res) {mysetting.callback();});}/* * 弹出加载信息 * */function loading(content){if(content ==  "" || content == undefined || content == null){content =  'Loading...';}$ionicLoading.show({template : content});}/* * 隐藏加载信息 * */function loadingHide(){$ionicLoading.hide();}//返回service的功能return {"loading":loading,"loadingHide":loadingHide,"alert":alert,"prompt":prompt,"confirm":confirm};}]);

 

 

 

 

 

• 
• 大小: 8.3 KB

• 查看图片附件