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

前端之家收集整理的这篇文章主要介绍了在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:"提示!",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
		};

	}]);
  • 大小: 8.3 KB

猜你在找的Ajax相关文章