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:"提示!",callback:function(){ //window.location.href="/wap/tmpl/member/login.html"; } }); }else{ tipService.alert({ title:"提示!",callback:function(){ } }); } } }; publicService.uploadFile(mysetting); }
备注:tipService.loadingHide();是隐藏遮罩层,允许用户操作。
4、底层利用ajaxfileupload.js插件完成异步上传文件
/* * 上传图片 * */ function uploadFile(mysetting){ function startUpload(){ $.ajaxFileUpload({ url : WAP_CONFIG.path+mysetting.url,//需要链接到服务器地址 secureuri : false,//是否使用安全方式 https fileElementId : mysetting.fileElementId,//文件选择框的id属性 dataType: 'json',//服务器返回的格式,可以是xml,默认还是用js最喜欢的json data: 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!",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 }; }]);