appcan拍照上传和图库选择上传改进版
appcan去年到今天进行了升级，增加MVVM支持，很多原生插件也都有了新版本，我在写拍照上传时找了网上的一片文章，代码写的很好，不过有些方法还是过期了，这里大部分也是别人的代码，我在这里贴出来，进行了一点改进，并经过测试，如果原作者不允许发布，我会及时删除，下面直接贴出源代码：
$("#show_img").click(function(){
showActionSheet();
uexWindow.cbActionSheet = actionSheetSuccess;
uexImage.onPickerClosed = ready_upload1;
uexCamera.cbOpenInternal = ready_upload;
uexWidgetOne.cbError = uexWidgetOneErrorCb;
uexUploaderMgr.onStatus = onStatus;
uexUploaderMgr.cbCreateUploader = cbCreateUploader;
});
function showActionSheet(){//弹出上传选择框
var value = "拍照上传;本地上传";
var mycars=value.split(";");
uexWindow.actionSheet("","取消",mycars);
}
function actionSheetSuccess(opId, dataType, data)//判断上传选择
{
if(data == 0)//相机
{
uexCamera.openInternal(0,50);
}
else if(data == 1)//本地浏览
{
//打开多图片选择器
var data = {
min:1,
max:1,
quality:0.8,
detailedInfo:true,
style:1,
};
uexImage.openPicker(data);//这里有改进
}
}
function ready_upload1(info){//新增回调
var info = JSON.parse(info);
ready_upload(0,0,info.data);
}
function ready_upload(opCode, dataType, data)//获取已选择照片
{ numfile=0;
//data为选择图片的路径，以字符串形式返回如：a.jpg,b,jpg;
//alert(data);
file_src=data.toString();
var filego=file_src.split(",");
filelen=filego.length;
uexUploaderMgr.createUploader(0, uploadHttp);
var headJson = {"mid":appcan.locStorage.getVal('mid'),"access_token":appcan.locStorage.getVal('access_token')};//这里是我的接口需要的
uexUploaderMgr.setHeaders(0, JSON.stringify(headJson));
}
function cbCreateUploader(ii, dataType, data){//上传对象创建结果
//alert('upload');
if(data == 0){//创建成功
var filego=file_src.split(",");//将需要发送的多个图片路径分割开
file_data="file";
uexLoadingView.openCircleLoading();
uexUploaderMgr.uploadFile(0,filego[numfile],file_data,1);
}else{
uexWindow.closeToast();
uexWindow.toast('0','5',"上传失败",2000);
}
}
function onStatus(ii, fileSize, percent, serverPath, status){
//serverPath是服务器返回的数据
switch (status) {
case 0:
//document.getElementById('percentage').innerHTML = "上传包大小:"+packageSize+"
上传进度:"+percent+"%";
break;
case 1:
numfile=numfile+1;
uexLoadingView.close();
//alert(serverPath);
var data =JSON.parse(serverPath);
var url = data.data.url;
var upload_path = data.data.upload_path;
//alert(upload_path);
$("#up_path").val(upload_path);
$("#show_img").html('
');
//回显图片
// $(".uploadimg").append("![]("+uploadHttpshow+"?imageName=slt"+serverPath.imageName+")
×");
//关闭创建对象
uexUploaderMgr.closeUploader(0);
if(numfile完整js文件内容：
(function($) {
var tabview = appcan.tab({
selector: $("#Tab_FzH5bY"),
hasIcon: true,
hasAnim: false,
hasLabel: true,
hasBadge: false,
index: 3,
data: [{
"label": "首页",
"icon": "fa-home"
},
{
"label": "艺术家",
"icon": " fa-paint-brush"
},
{
"label": "私人订制",
"icon": " fa-magic"
},
{
"label": "个人中心",
"icon": " fa-user"
}]
});
tabview.on("click", function(obj, index) {
if(index == 0){
tabview.moveTo(3);
appcan.window.open("index","index.html",0);
}
if(index == 1){
tabview.moveTo(3);
appcan.window.open("artist","artist.html",0);
}
if(index == 2){
tabview.moveTo(3);
//appcan.window.open("artist","artist.html",0);
}
});
var lv = appcan.listview({
selector : "#listview",
type : "thinLine",
hasIcon : true,
hasAngle : true,
hasSubTitle : true,
multiLine : 1,
});
lv.set([{
title : "商品收藏",
icon:"./css/icons/sc0.png",
id:"1"
}, {
title : "我的地址",
icon:"./css/icons/dz.png",
id:"2"
},
{
title : "艺术家关注",
icon:"./css/icons/ysj0.png",
id:"3"
},
{
title : "我的银行卡",
icon:"./css/icons/yhk0.png",
id:"4"
},
{
title : "我的合同",
icon:"./css/icons/ht0.png",
id:"5"
}]);
lv.on("click",function(ele,obj,curEle){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
if(obj.id == 2){
appcan.window.open("my_address","my-address.html",10);
}else if(obj.id == 1){
appcan.window.open("shoucang2","shoucang2.html",10);
}else if(obj.id == 3){
appcan.window.open("artist-view2","artist-view2.html",10);
}else if(obj.id == 4){
appcan.window.open("bank_manager","bank_manager.html",10);
}else if(obj.id == 5){
appcan.window.open("my-hetong","my-hetong2.html",10);
}
}
});
appcan.ready(function() {
$.scrollbox($("body")).on("releaseToReload",
function() { //After Release or call reload function,we reset the bounce
$("#ScrollContent_pQn5hx").trigger("reload", this);
}).on("onReloading",
function(a) { //if onreloading status, drag will trigger this event
}).on("dragToReload",
function() { //drag over 30% of bounce height,will trigger this event
}).on("draging",
function(status) { //on draging, this event will be triggered.
}).on("release",
function() { //on draging, this event will be triggered.
}).on("scrollbottom",
function() { //on scroll bottom,this event will be triggered.you should get data from server
$("#ScrollContent_pQn5hx").trigger("more", this);
});
var access_token = appcan.locStorage.getVal('access_token');
if(access_token != null || access_token != ''){
$.scrollbox($("body")).reload();
}
appcan.window.subscribe(channel.LOGIN_SUCCESS,function(msg){
if(msg == 'login_success'){
$.scrollbox($("body")).reload();
}
if(msg == 'login_out'){
Model.set({headimgurl:"css/icons/logo1.png",
username:'',
realname:'',
rent_daifukuan:0,
rent_daifahuo:0,
rent_daishouhuo:0,
rent_return:0,
buy_daifukuan:0,
buy_daifahuo:0,
buy_daishouhuo:0,
buy_return:0});
$.scrollbox($("body")).reload();
}
});
});
//设置
appcan.button("#settings","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{//登录了
//上传设置
appcan.window.open("set-up","set-up.html",10);
}
});
//点击头像下面的注册登录
appcan.button("#username","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
//if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
// }
});
//查看全部租赁订单
appcan.button("#SquareBox_bgzwnk1","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
//打开全部租赁订单页面
appcan.locStorage.setVal('selected_index',0);
appcan.window.open("rent_order","rent_order/rent-order.html",10);
}
});
//租赁待付款
appcan.button("#SquareBox_gaYB421","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
//打开租赁待付款订单
appcan.locStorage.setVal('selected_index',1);
appcan.window.open("rent_order","rent_order/rent-order.html",10);
}
});
//租赁待发货
appcan.button("#SquareBox_rAbbcB1","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
//打开租赁待发货订单
appcan.locStorage.setVal('selected_index',2);
appcan.window.open("rent_order","rent_order/rent-order.html",10);
}
});
//租赁待收货
appcan.button("#SquareBox_9T1EWj1","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
//打开租赁待收货订单
appcan.locStorage.setVal('selected_index',3);
appcan.window.open("rent_order","rent_order/rent-order.html",10);
}
});
//租赁退换货
appcan.button("#SquareBox_q6Md1A1","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
//打开租赁退换货订单
appcan.locStorage.setVal('selected_index',4);
appcan.window.open("rent_order","rent_order/rent-order.html",10);
}
});
//全部订单
appcan.button("#SquareBox_bgzwnk","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
//打开全部订单
appcan.locStorage.setVal('selected_index',0);
appcan.window.open("buy_order","buy_order/buy-order.html",10);
}
});
//待付款
appcan.button("#SquareBox_gaYB42","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
//打开待付款订单
appcan.locStorage.setVal('selected_index',1);
appcan.window.open("buy_order","buy_order/buy-order.html",10);
}
});
//待发货
appcan.button("#SquareBox_rAbbcB","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
//打开待发货订单
appcan.locStorage.setVal('selected_index',2);
appcan.window.open("buy_order","buy_order/buy-order.html",10);
}
});
//待收货
appcan.button("#SquareBox_9T1EWj","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
//打开待收货订单
appcan.locStorage.setVal('selected_index',3);
appcan.window.open("buy_order","buy_order/buy-order.html",10);
}
});
//退换货
appcan.button("#SquareBox_q6Md1A","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
//打开退换货订单
appcan.locStorage.setVal('selected_index',4);
appcan.window.open("buy_order","buy_order/buy-order.html",10);
}
});
//我的钱包
appcan.button("#SquareBox_6YsQ2M","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
//打开我的钱包
appcan.window.open("my_wallet","member_center/my-wallet.html",10);
}
});
//推荐用户
appcan.button("#SquareBox_bF8237","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
//打开推荐用户
appcan.window.open("tjyh","member_center/tjyh.html",10);
}
});
//推荐订单
appcan.button("#SquareBox_GNri7e","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
//打开推荐订单
appcan.window.open("tjdd","member_center/tjdd1.html",10);
}
});
//邀请码
appcan.button("#SquareBox_j4wHV3","act-btn",function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
//打开邀请码
appcan.window.open("yqm","member_center/yqm.html",10);
}
});
//签到
appcan.button("#goSign","act-btn",function(){
var param = new Array();
param['uid'] = appcan.locStorage.getVal('mid');
param['access_token'] = appcan.locStorage.getVal('access_token');
if(param['access_token']==null || param['access_token'] == ''){
appcan.window.open("login","login.html",10);
return ;
}
appcan.request.ajax({
url: constant.BASE_URL + "/" + constant.DOSIGN + "?access_token="+param['access_token']+"&mid="+param['uid'],
type: "GET",
data: '',
dataType: "json",
contentType: "application/x-www-form-urlencoded",
success: function(data) {
if(data.code == 1000){
appcan.window.openToast({
msg:'签到成功',
duration:2000,
position:5,
type:0
});
$("#lingqu").hide();
$("#qiandao").show();
}else if(data.code == 4001){
appcan.window.openToast({
msg:'今天已签到',
duration:2000,
position:5,
type:0
});
}else{
appcan.window.openToast({
msg:'签到失败',
duration:2000,
position:5,
type:0
});
}
},
error: function(e, err) {
appcan.window.openToast({
msg:'签到失败',
duration:2000,
position:5,
type:0
});
}
});
});
appcan.button("#jifen1","btn-act",function(){
appcan.window.open("jifen","jifen.html",10);
});
appcan.button("#jifen2","btn-act",function(){
appcan.window.open("jifen","jifen.html",10);
});
})($);
var access_token = appcan.locStorage.getVal('access_token');
var mid = appcan.locStorage.getVal('mid');
var uploadHttp = constant.BASE_URL +"/"+ constant.SET_AVATAR+"?access_token="+access_token+"&mid="+mid;
$("#head_img").click(function(){
var access_token = appcan.locStorage.getVal('access_token');
if(access_token == null || access_token == ''){ //没登录
appcan.window.open("login","login.html",10);
}else{
access_token = appcan.locStorage.getVal('access_token');
mid = appcan.locStorage.getVal('mid');
uploadHttp = constant.BASE_URL +"/"+ constant.SET_AVATAR+"?access_token="+access_token+"&mid="+mid;
showActionSheet();
uexWindow.cbActionSheet = actionSheetSuccess;
uexImage.onPickerClosed = ready_upload1;
uexCamera.cbOpenInternal = ready_upload;
uexWidgetOne.cbError = uexWidgetOneErrorCb;
uexUploaderMgr.onStatus = onStatus;
uexUploaderMgr.cbCreateUploader = cbCreateUploader;
}
});
function showActionSheet(){//弹出上传选择框
var value = "拍照上传;本地上传";
var mycars=value.split(";");
uexWindow.actionSheet("","取消",mycars);
}
function actionSheetSuccess(opId, dataType, data)//判断上传选择
{
if(data == 0)//相机
{
uexCamera.openInternal(0,50);
}
else if(data == 1)//本地浏览
{
//打开多图片选择器
var data = {
min:1,
max:1,
quality:0.8,
detailedInfo:true,
style:1,
};
uexImage.openPicker(data);
}
}
function ready_upload1(info){
var info = JSON.parse(info);
ready_upload(0,0,info.data);
}
function ready_upload(opCode, dataType, data)//获取已选择照片
{ numfile=0;
//data为选择图片的路径，以字符串形式返回如：a.jpg,b,jpg;
//alert(data);
file_src=data.toString();
var filego=file_src.split(",");
filelen=filego.length;
uexUploaderMgr.createUploader(0, uploadHttp);
var headJson = {"mid":appcan.locStorage.getVal('mid'),"access_token":appcan.locStorage.getVal('access_token')};
uexUploaderMgr.setHeaders(0, JSON.stringify(headJson));
}
function cbCreateUploader(ii, dataType, data){//上传对象创建结果
//alert('upload');
if(data == 0){//创建成功
var filego=file_src.split(",");//将需要发送的多个图片路径分割开
file_data="file";
uexLoadingView.openCircleLoading();
uexUploaderMgr.uploadFile(0,filego[numfile],file_data,1);
}else{
uexWindow.closeToast();
uexWindow.toast('0','5',"上传失败",2000);
}
}
function onStatus(ii, fileSize, percent, serverPath, status){
//serverPath是服务器返回的数据
switch (status) {
case 0:
//document.getElementById('percentage').innerHTML = "上传包大小:"+packageSize+"
上传进度:"+percent+"%";
break;
case 1:
numfile=numfile+1;
uexLoadingView.close();
//alert(serverPath);
var data =JSON.parse(serverPath);
if(data.code == 2000){
uexWindow.toast('0','5',"设置成功",2000);
appcan.window.publish(channel.LOGIN_SUCCESS,'login_success');//通知个人中心
}else{
uexWindow.toast('0','5',"设置失败",2000);
}
//var url = data.data.url;
//var upload_path = data.data.upload_path;
//alert(upload_path);
//$("#up_path").val(upload_path);
//$("#show_img").html(' ');
//回显图片
// $(".uploadimg").append("×");
//关闭创建对象
uexUploaderMgr.closeUploader(0);
if(numfile uexUploaderMgr.createUploader(0, uploadHttp); } //$("#gsover").show(); break; case 2: uexUploaderMgr.closeUploader(0); uexLoadingView.close(); alert("上传失败"); break; } } function uexWidgetOneErrorCb(opCode, errorCode, errorInfo){ alert("Error"); }