您需要登录后才可以操作登录 | 立即注册
关闭
楼主
minis
  • TA的每日心情
    开心
    2014-10-31 10:46
  • 签到天数: 47 天

    连续签到: 1 天

    [LV.5]常住居民I

    [秘籍荟萃] 最近看大家上传图片问题很多,分享一下代码   [复制链接]

    25486 64 发表于 2014-7-22 10:43:03

    本帖最后由 AppCan运营 于 2015-3-24 14:34 编辑

    此代码在AppCan项目中使用多次,一直很稳定,不过,需要读懂代码的才行。支持多图上传,支持选择图片以后,进行删除,显示已选择图片。
    /*===================上传图片====================*/
    var filefrom="";
    var allimg="";
    function deleteImg(src,e){
                    e.stopPropagation();
                    e.preventDefault();
                    var img=filefrom.split(";");
                    filefrom="";
                    for(i=0;i<img.length-1;i++){
                            if(img!=src){
                                    filefrom+=img+";";
                            }                        
                    }
                    img=filefrom.split(";");
                    var imgList="";
                    for(i=0;i<img.length-1;i++){
                            imgList+="<div id='img"+i+"' class='yxb1_box9 clearfix'>";
                imgList+="<div ontouchstart=zy_touch('btn-act1') onclick=\"deleteImg('"+img+"',event)\" class='x_box3'>";
                imgList+="<img src='img/yxico10.png'/>";
                imgList+="</div>";
                imgList+="<img ontouchstart=zy_touch('btn-act1') onclick=\"deleteImg('"+img+"',event)\" src='file://"+img+"'/>";
                imgList+="</div>";
                    }
                    $$('imgList').innerHTML=imgList;
    }

    function imgopen(){
            uexWindow.cbActionSheet=function (opId, dataType, data){
            if(data == 0){
                    paiopen();
            }
            else if(data == 1){
                    fileopen();
            }
            }
            var value = "拍照上传;本地上传";
            var mycars=value.split(";");
            uexWindow.actionSheet("","取消",mycars);
    }

    function paiopen(){
            uexCamera.cbOpen=function (opCode, dataType, data)        {
                    filefrom +=data+";";
                    var img=filefrom.split(";");
                    var imgList="";
                    var j="";
                    for(i=0;i<img.length-1;i++){
                            imgList+="<div id='img"+i+"' class='yxb1_box9 clearfix'>";
                imgList+="<div ontouchstart=zy_touch('btn-act1') onclick=\"deleteImg('"+img+"',event)\" class='x_box3'>";
                imgList+="<img src='img/yxico10.png'/>";
                imgList+="</div>";
                imgList+="<img ontouchstart=zy_touch('btn-act1') onclick=\"deleteImg('"+img+"',event)\" src='file://"+img+"'/>";
                imgList+="</div>";        
                    }
                    $$('imgList').innerHTML=imgList;
            }
            uexCamera.open();
    }

    function fileopen(){
            uexImageBrowser.cbPick=function (opCode,dataType,data)        {
                    if(data==""){return;}
                    filefrom +=data+";";
                    var img=filefrom.split(";");
                    var imgList="";
                    var j="";
                    for(i=0;i<img.length-1;i++){        
                            imgList+="<div id='img"+i+"' class='yxb1_box9 clearfix'>";
                imgList+="<div ontouchstart=zy_touch('btn-act1') onclick=\"deleteImg('"+img+"',event)\" class='x_box3'>";
                imgList+="<img src='img/yxico10.png'/>";
                imgList+="</div>";
                imgList+="<img ontouchstart=zy_touch('btn-act1') onclick=\"deleteImg('"+img+"',event)\" src='file://"+img+"'/>";
                imgList+="</div>";
                    }
                    $$('imgList').innerHTML=imgList;
            }
            uexImageBrowser.pick();
    }

    var uploadImgNum=0;
    function uploadImg(){
            if(filefrom==""){
                    submit();//表单及其它数据提交到服务器端
                    return;
            }
            var img=filefrom.split(";");        
            if(uploadImgNum==img.length-1){
                    uexWindow.toast("0","5","图片上传结束!","2000");
                    submit();
                    return;
            }
            upload(img[uploadImgNum],uploadImgNum);
            uploadImgNum++;
    }

    function upload(imgPath,i){
            var uploadHttp =  http+"uploadimg/imgupload";
            randOpId = Math.floor(Math.random() * ( 1000 + 1));        
            uexUploaderMgr.onStatus = function(opCode,fileSize,percent,serverPath,status){
                    switch (status){
                                    case 0:
                                            uexWindow.toast("1","5",percent+"%","0");
                                            break;
                                    case 1:
                                            uexUploaderMgr.closeUploader(opCode);
                                            uexWindow.closeToast();
                                            var json = eval("(" + serverPath + ")");
                                            if (json.code == 1) {
                                                    allimg += json.img + ";";
                                            }
                                            $$('img'+i).style.display="none";
                                            uexWindow.toast("0","5","图片成功上传!","2000");        
                                            uploadImg();
                                            break;
                                    case 2:
                                            uexWindow.closeToast();
                                            uexWindow.toast('0','5',"图片上传失败",2000);
                                            uexUploaderMgr.closeUploader(opCode);
                                            uploadImg();
                                            break;
                                    default:
                                            break;
                            }
            }

            uexUploaderMgr.cbCreateUploader = function(opCode,dataType,data){
                    if(data == 0){
                            var path=imgPath;
                            var inCompress = 1;
                            if (uexWidgetOne.platformName == "iOS"){
                                    uexUploaderMgr.uploadFile(opCode,path,"file",inCompress,720);
                            }
                            if (uexWidgetOne.platformName == "android"){
                                    uexUploaderMgr.uploadFile(opCode,path,"file",inCompress,720);
                            }
                    }else{
                            uexWindow.closeToast();
                            var strimg2="图片上传失败";
                            uexWindow.toast('0','5','图片上传失败',3000);
                    }
            }
            var strimg2="开始上传图片";
            uexWindow.toast('1','5',strimg2,'');
            uexUploaderMgr.createUploader(randOpId,uploadHttp);
    }

    推荐
    hmilymy
  • TA的每日心情
    奋斗
    2014-10-22 15:18
  • 签到天数: 21 天

    连续签到: 1 天

    [LV.4]偶尔看看III

    显示全部楼层 发表于 2014-7-28 14:23:12
    minis 发表于 2014-7-28 11:37
    PHP  echo就行了。

    我echo以后还是不能得到 serverPath的值
    推荐
    心魂
  • TA的每日心情
    奋斗
    2014-11-29 09:14
  • 签到天数: 3 天

    连续签到: 1 天

    [LV.2]偶尔看看I

    显示全部楼层 发表于 2014-12-22 15:16:25

    服务端代码用java 直接获取response的输出流输出字符串,图片上传完成后android下能收到status的变化,并且能正常接收数据,ios下status始终为0,请问服务端返回给ios客户端需要特别的代码吗?
    推荐
    minis
  • TA的每日心情
    开心
    2014-10-31 10:46
  • 签到天数: 47 天

    连续签到: 1 天

    [LV.5]常住居民I

    显示全部楼层 发表于 2015-9-1 10:37:01
    这个代码是已经压缩了图片再上传的。
    沙发
    羽衣尘
  • TA的每日心情
    奋斗
    2015-4-27 09:07
  • 签到天数: 148 天

    连续签到: 1 天

    [LV.7]常住居民III

    显示全部楼层 发表于 2014-7-22 13:18:28
    顶一个,之前想实现排队上传的功能,想了很久之后才终于实现了,要是早点看到这篇文章就好了
    板凳
    mr聂同学
  • TA的每日心情

    2014-10-31 12:31
  • 签到天数: 49 天

    连续签到: 1 天

    [LV.5]常住居民I

    显示全部楼层 发表于 2014-7-22 13:51:41
    感谢樊同学哦。。
    5#
    wuhanfengchao
  • TA的每日心情
    奋斗
    2015-1-20 18:20
  • 签到天数: 92 天

    连续签到: 1 天

    [LV.6]常住居民II

    显示全部楼层 发表于 2014-7-22 23:21:59
    非常支持!鼓励分享!
    6#
    goflyxp
  • TA的每日心情
    难过
    2015-4-12 13:35
  • 签到天数: 33 天

    连续签到: 1 天

    [LV.5]常住居民I

    显示全部楼层 发表于 2014-7-23 14:17:06
    非常感谢,问题是用你的代码在ios下status依然是返回的空值,服务器端查看图片已经上传成功
    7#
    goflyxp
  • TA的每日心情
    难过
    2015-4-12 13:35
  • 签到天数: 33 天

    连续签到: 1 天

    [LV.5]常住居民I

    显示全部楼层 发表于 2014-7-23 14:17:27
    接上:在android下完全没有问题
    8#
    minis
  • TA的每日心情
    开心
    2014-10-31 10:46
  • 签到天数: 47 天

    连续签到: 1 天

    [LV.5]常住居民I

    显示全部楼层 发表于 2014-7-24 10:47:30
    goflyxp 发表于 2014-7-23 14:17
    非常感谢,问题是用你的代码在ios下status依然是返回的空值,服务器端查看图片已经上传成功 ...

    ios下面最不会出现问题的,我不知道你后端是用什么写的,我们用PHP都没有问题呢。
    9#
    AppCan_小助
  • TA的每日心情
    开心
    2016-10-10 11:07
  • 签到天数: 66 天

    连续签到: 1 天

    [LV.6]常住居民II

    显示全部楼层 发表于 2014-7-25 09:43:26
    支持!   赞你!
    10#
    hmilymy
  • TA的每日心情
    奋斗
    2014-10-22 15:18
  • 签到天数: 21 天

    连续签到: 1 天

    [LV.4]偶尔看看III

    显示全部楼层 发表于 2014-7-28 09:24:56
    php后台怎么返回这个serverPath呢?
    还有一些帖子被系统自动隐藏,点此展开
    主题:
    级别:游客
    发帖:
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    快速回复 返回顶部 返回列表