在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" οnchange="angular.element(this).scope().startUpload()">
	</div>
</div>
<input type="hidden" ng-model="formData.filePath">

 

注意事项：

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

2）、οnchange="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, //是否使用安全方式 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!",
				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

• 查看图片附件