appcan拍照上传和图库选择上传改进版

最新推荐文章于 2021-08-09 14:01:32 发布

dsb2008dsb

最新推荐文章于 2021-08-09 14:01:32 发布

阅读量5.2k

点赞数

分类专栏： appcan

本文链接：https://blog.csdn.net/dsb2008dsb/article/details/77744478

版权

appcan 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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+"<br>上传进度:"+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('<img id="upload_img"  src="'+url+'" style="width:5em; height:5em; margin-top: 0.5em; margin-left: 1em;"/> ');
         
        //回显图片  
       // $(".uploadimg").append("<img id='"+serverPath.imageName+"' src='"+uploadHttpshow+"?imageName=slt"+serverPath.imageName+"'/><span id='1' onclick='closeimg(this)'>×</span>");  
        //关闭创建对象  
        uexUploaderMgr.closeUploader(0);  
        if(numfile<filelen){  
            uexUploaderMgr.createUploader(0, uploadHttp);  
        }  
        //$("#gsover").show();  
        break;  
    case 2:  
        uexUploaderMgr.closeUploader(0);  
        uexLoadingView.close();  
        alert("上传失败");  
        break;  
    }  
}  

function uexWidgetOneErrorCb(opCode, errorCode, errorInfo){  
    alert("Error");  
}

完整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+"<br>上传进度:"+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('<img id="upload_img" src="'+url+'" style="width:5em; height:5em; margin-top: 0.5em; margin-left: 1em;"/> ');

//回显图片

// $(".uploadimg").append("<img id='"+serverPath.imageName+"' src='"+uploadHttpshow+"?imageName=slt"+serverPath.imageName+"'/><span id='1' οnclick='closeimg(this)'>×</span>");

//关闭创建对象

uexUploaderMgr.closeUploader(0);

if(numfile<filelen){

uexUploaderMgr.createUploader(0, uploadHttp);

}

//$("#gsover").show();

break;

case 2:

uexUploaderMgr.closeUploader(0);

uexLoadingView.close();

alert("上传失败");

break;