在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, //是否使用安全方式 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
查看图片附件