注册 登录
tarik
tarik
  • 发布：2016-04-08 10:43
  • 更新：2021-02-09 10:20
  • 阅读：37809

分享移动端图片压缩上传（整理修改微社区图片上传，带UI，带demo，demo服务器端用php）

分类：HTML5+
图片压缩 照片压缩 uploader 源码 技术分享

20160411更新：
使同个页面可以配置调用多个上传图片
20160418更新：
修复上传进度条不准
增加上传样式2，调整部分样式

一些配置问题：
objUploadImg.uploadMaxW = 2000; //生成图片的最大宽度
objUploadImg.uploadMaxH = 2000; //生成图片的最大高度
*建议这两项默认800800
objUploadImg.uploadPicMore = true;//是否允许多图上传 默认单张上传
即便开启，安卓也只支持单张上传
objUploadImg.onceMaxUpload = 10;//多图上传时，一次上传的最大张数 默认10
最好不要过多，因为图片在前端用H5 <canvas> 处理，测试过配置最大宽高为2000px时，iPhone6微信端一次上传20张会出现微信自动关闭；如果同个页面调用多个上传方法，一次上传的最大张数之和最好不超过10张**

其他的自行查看附件demo，随便贴几段代码，注意JS代码的引用位置 

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title>图片上传</title>  
    <link rel="stylesheet" href="css/mobile-uploadImg.css">  

    <script src="js/jquery-1.9.0.js"></script>  
    <script src="js/mobile-uploadCompresserImg.js"></script>  
    <script src="js/mobile-uploadImg.js"></script>  

</head>  
<body style="background: #f5f5f5;">  
<div style="margin:20px 10px;">  
    <form method="post" action="">  
        <div id="uploadImgForm">  
            <div class="mbupload_frame">  
                <div class="mbupload_photoList">  
                    <ul>  
                        <li class="mbupload_on mbupload_addPic mbupload_addImg"></li>  
                    </ul>  
                    <p class="mbupload_textTip mbupload_f12">还可上传<span class="mbupload_onlyUploadNum"></span>张照片呦~</p>  
                </div>  
                <div class="mbupload_bgimg">  
                    <div class="iconSendImg mbupload_addImg" style="background:url(images/upload_carbg.png) no-repeat 50% 50%;"></div>  
                </div>  
            </div>  
        </div>  

        <div style="margin-top:20px;">  
            <div id="uploadImgForm2" class="uploadImgStyle2">  
                <div class="mbupload_frame">  
                    <div class="mbupload_photoList">  
                        <ul>  
                            <li class="mbupload_on mbupload_addPic mbupload_addImg"></li>  
                        </ul>  
                        <p class="mbupload_textTip mbupload_f12">还可上传<span class="mbupload_onlyUploadNum"></span>张照片呦~</p>  
                    </div>  
                    <div class="mbupload_bgimg">  
                        <div class="iconSendImg mbupload_addImg" style="background:url(images/upload_licensebg.png) no-repeat 50% 50%;"></div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </form>  
</div>  

<script type="text/javascript">  
    var objUploadImgForm = {};  
    objUploadImgForm.uploadUrl = "<?php echo('http://'.$_SERVER['HTTP_HOST'].'/uploads.php') ?>";//上传图片的地址  
    objUploadImgForm.formHtmlId = "#uploadImgForm";//上传图片的ID  
    objUploadImgForm.maxUpload = 20;//上传图片的最大张数  
    objUploadImgForm.uploadMaxW = 2000; //生成图片的最大宽度  
    objUploadImgForm.uploadMaxH = 2000; //生成图片的最大高度  
    objUploadImgForm.uploadQuality = 1; //目标jpg图片输出质量  
    objUploadImgForm.uploadPicSize = 8;//上传限制图片大小(MB)  默认8M  
    objUploadImgForm.uploadPicMore = true;//是否允许多图上传  默认单张上传  
    objUploadImgForm.onceMaxUpload = 10;//多图上传时，一次上传的最大张数 默认10  
    objUploadImgForm.uploadDefaultImgUrl = "images/defaultImg.png";//压缩图片时的默认图片地址  
    mobileUploadImg(objUploadImgForm);  
</script>  

<script type="text/javascript">  
    var objUploadImgForm2 = {};  
    objUploadImgForm2.uploadUrl = "<?php echo('http://'.$_SERVER['HTTP_HOST'].'/uploads.php') ?>";//上传图片的地址  
    objUploadImgForm2.formHtmlId = "#uploadImgForm2";//上传图片的ID  
    objUploadImgForm2.maxUpload = 1;//上传图片的最大张数  
    objUploadImgForm2.uploadMaxW = 800; //生成图片的最大宽度  
    objUploadImgForm2.uploadMaxH = 800; //生成图片的最大高度  
    objUploadImgForm2.uploadQuality = 1; //目标jpg图片输出质量  
    objUploadImgForm2.uploadPicSize = 8;//上传限制图片大小(MB)  默认8M  
    objUploadImgForm2.uploadPicMore = true;//是否允许多图上传  默认单张上传  
    objUploadImgForm2.onceMaxUpload = 10;//多图上传时，一次上传的最大张数 默认10  
    objUploadImgForm2.uploadDefaultImgUrl = "images/defaultImg.png";//压缩图片时的默认图片地址  
    mobileUploadImg(objUploadImgForm2);  
</script>  
</body>  
</html>
/**  
 * @filename mobile-uploadImg  
 * @description  
 * 作者: 418239385(418239385@qq.com)  
 * 创建时间: 2016-4-6 14:38:03  
 * 修改记录:  
 *  
 **/  
//------------------------------------------------------------------------------  
function mobileUploadImg(opts)  
{  
    if(opts == null){  
        objGlobal.DIC.dialog({content:'请配置上传图片的相关参数！', autoClose:false, okValue:"确定", isMask:true});  
        return;  
    }  
    var objUploadImg = {};  
    var opts = opts || {};  
    //上传图片的表单ID  
    objUploadImg.formHtmlId = opts.formHtmlId || "";  
    //最大上传图片量  
    objUploadImg.maxUpload = opts.maxUpload || 8;  
    //生成图片的最大宽度  
    objUploadImg.uploadMaxW = opts.uploadMaxW || 800;  
    //生成图片的最大高度  
    objUploadImg.uploadMaxH = opts.uploadMaxH || 800;  
    //目标jpg图片输出质量  
    objUploadImg.uploadQuality = opts.uploadQuality || 1;  
    //上传限制图片体积(MB)   默认8M  
    objUploadImg.uploadPicSize = opts.uploadPicSize || 8;  
    //是否允许多图上传  默认单张上传  
    objUploadImg.uploadPicMore = opts.uploadPicMore || false;  
    //多图上传时，一次上传的最大张数 默认10  
    objUploadImg.onceMaxUpload = opts.onceMaxUpload || 10;  
    // 上传图片地址  
    objUploadImg.uploadUrl = opts.uploadUrl || "";  
    //压缩图片时的默认图片地址  
    objUploadImg.uploadDefaultImgUrl = opts.uploadDefaultImgUrl || "";  
    //多图上传时，上传第一张到最后一张的状态  
    objUploadImg.isMoreBusy = false;  
    // 上传信息 主要是 id 对应信息  
    objUploadImg.uploadInfo = {};  
    // 上传队列，里面保存的是 id  
    objUploadImg.uploadQueue = [];  
    // 预览队列，里面保存的是 id  
    objUploadImg.previewQueue = [];  
    // 请求对象  
    objUploadImg.xhr = {};  
    // 是否有图片正在压缩  
    objUploadImg.isEncoderBusy = false;  
    // 是否有任务正在上传  
    objUploadImg.isBusy = false;  

    if(objUploadImg.formHtmlId.length <= 0){  
        objGlobal.DIC.dialog({content:'请配置上传图片的容器ID！', autoClose:false, okValue:"确定", isMask:true});  
        return;  
    }  

    if(objUploadImg.uploadUrl.length <= 0){  
        objGlobal.DIC.dialog({content:'请配置上传图片的URL地址！', autoClose:false, okValue:"确定", isMask:true});  
        return;  
    }  

    objUploadImg.countUpload = function() {  
        var num = 0;  
        $.each(objUploadImg.uploadInfo, function(i, n) {  
            if (n) {  
                ++ num;  
            }  
        });  
        return num;  
    };  

    // 图片预览  
    objUploadImg.uploadPreview = function(id) {  
        var reader = new FileReader();  

        var uploadBase64;  
        var conf = {}, file = objUploadImg.uploadInfo[id].file;  

        conf = {  
            maxW: objUploadImg.uploadMaxW, //目标宽  
            maxH: objUploadImg.uploadMaxH, //目标高  
            quality: objUploadImg.uploadQuality, //目标jpg图片输出质量  
        };  

        reader.onload = function(e) {  
            var result = this.result;  

            // 如果是jpg格式图片，读取图片拍摄方向,自动旋转  
            if (file.type == 'image/jpeg'){  
                try {  
                    var jpg = new objJpegMeata.JpegMeta.JpegFile(result, file.name);  
                } catch (e) {  
                    objGlobal.DIC.dialog({content:'图片不是正确的图片数据', autoClose:true});  
                    $(objUploadImg.formHtmlId + ' #li' + id).remove();  
                    objUploadImg.isEncoderBusy = false;  
                    return false;  
                }  
                if (jpg.tiff && jpg.tiff.Orientation) {  
                    //设置旋转  
                    conf = $.extend(conf, {  
                        orien: jpg.tiff.Orientation.value  
                    });  
                }  
            }  

            // 压缩  
            if (objImageCompresser.ImageCompresser.support()) {  
                var img = new Image();  
                img.onload = function() {  
                    try {  
                        uploadBase64 = objImageCompresser.ImageCompresser.getImageBase64(this, conf);  
                    } catch (e) {  
                        objGlobal.DIC.dialog({content:'压缩图片失败', autoClose:true});  
                        $(objUploadImg.formHtmlId + ' #li' + id).remove();  
                        objUploadImg.isEncoderBusy = false;  
                        return false;  
                    }  
                    if (uploadBase64.indexOf('data:image') < 0) {  
                        objGlobal.DIC.dialog({content:'上传照片格式不支持', autoClose:true});  
                        $(objUploadImg.formHtmlId + ' #li' + id).remove();  
                        objUploadImg.isEncoderBusy = false;  
                        return false;  
                    }  

                    objUploadImg.uploadInfo[id].file = uploadBase64;  
                    $(objUploadImg.formHtmlId + ' #li' + id).find('img').attr('src', uploadBase64);  
                    objUploadImg.uploadQueue.push(id);  
                }  
                img.onerror = function() {  
                    objGlobal.DIC.dialog({content:'解析图片数据失败', autoClose:true});  
                    $(objUploadImg.formHtmlId + ' #li' + id).remove();  
                    objUploadImg.isEncoderBusy = false;  
                    return false;  
                }  
                img.src = objImageCompresser.ImageCompresser.getFileObjectURL(file);  
            } else {  
                uploadBase64 = result;  
                if (uploadBase64.indexOf('data:image') < 0) {  
                    objGlobal.DIC.dialog({content:'上传照片格式不支持', autoClose:true});  
                    $(objUploadImg.formHtmlId + ' #li' + id).remove();  
                    objUploadImg.isEncoderBusy = false;  
                    return false;  
                }  

                objUploadImg.uploadInfo[id].file = uploadBase64;  
                $(objUploadImg.formHtmlId + ' #li' + id).find('img').attr('src', uploadBase64);  
                objUploadImg.uploadQueue.push(id);  
            }  
        }  

        reader.readAsBinaryString(objUploadImg.uploadInfo[id].file);  
    };  

    // 创建上传请求  
    objUploadImg.createUpload = function(id, type, uploadTimer) {  
        if (!objUploadImg.uploadInfo[id]) {  
            objUploadImg.isEncoderBusy = false;  
            objUploadImg.isBusy = false;  
            return false;  
        }  
        // 移除图片压缩中...  
        $(objUploadImg.formHtmlId + ' #li' + id).find('.mbupload_maskTxt').remove();  

        // 图片posturl  
        var uploadUrl = objUploadImg.uploadUrl;  
        // 产生进度条  
        var progressHtml = '<div class="mbupload_progress mbupload_brSmall" id="mbupload_progress'+id+'"><div class="mbupload_proBar" style="width:0%;"></div></div>';  
        $(objUploadImg.formHtmlId + ' #li' + id).find('.mbupload_maskLay').after(progressHtml);  

        var formData = new FormData();  
        formData.append('upload_pic', objUploadImg.uploadInfo[id].file);  
        formData.append('upload_name', objUploadImg.uploadInfo[id].oldFileInfo.name);  
        formData.append('upload_id', id);  

        var progress = function(e) {  
            if (e.target.response) {  
                var result = $.parseJSON(e.target.response);  

                if (result.errCode != 0) {  
                    // $('#content').val(result.errCode);  
                    objGlobal.DIC.dialog({content:'网络不稳定，请稍后重新操作', autoClose:true});  
                    removePic(id);  
                    //更新剩余上传数  
                    objUploadImg.uploadRemaining();  
                    return false;  
                }  
            }  

            var progress = $(objUploadImg.formHtmlId + ' #mbupload_progress' + id).find('.mbupload_proBar');  
            if (e.total == e.loaded) {  
                var percent = 100;  
            } else {  
                var percent = 100*(e.loaded / e.total);  
            }  

            // 控制进度条不要超出  
            if (percent > 100) {  
                percent = 100;  
            }  

            progress.width(percent + '%');  
            //progress.animate({'width': '95%'}, 1500);  

            setTimeout(function(){  
                if (percent == 100) {  
                    donePic(id);  
                    var pLength = 0, nLength = 0;  
                    if(objUploadImg.uploadPicMore){  
                        pLength = objUploadImg.previewQueue.length;  
                        nLength = objUploadImg.uploadQueue.length;  
                    }  
                    if(uploadTimer && pLength <= 0 && nLength <= 0){  
                        clearInterval(uploadTimer);  
                    }  
                }  
            }, 400);  
        }  

        var removePic = function(id) {  
            donePic(id);  
            $('#li' + id).remove();  
        }  

        var donePic = function(id) {  
            objUploadImg.isEncoderBusy = false;  
            objUploadImg.isBusy = false;  
            if(objUploadImg.uploadPicMore && (objUploadImg.previewQueue.length <= 0) &&  
                 (objUploadImg.uploadQueue.length <= 0)){  
                objUploadImg.isMoreBusy = false;  
            }  
            if (typeof objUploadImg.uploadInfo[id] != 'undefined') {  
                objUploadImg.uploadInfo[id].isDone = true;  
            }  
            if (typeof objUploadImg.xhr[id] != 'undefined') {  
                objUploadImg.xhr[id] = null;  
            }  
        }  

        var complete = function(e) {  
            var progress = $(objUploadImg.formHtmlId + ' #mbupload_progress' + id).find('.mbupload_proBar');  
            progress.css('width', '100%');  
            if($(objUploadImg.formHtmlId + ' #li' + id)){  
                $(objUploadImg.formHtmlId + ' #li' + id).find('.mbupload_maskTxt').remove();  
            }  
            $(objUploadImg.formHtmlId + ' #li' + id).find('.mbupload_maskLay').remove();  
            $(objUploadImg.formHtmlId + ' #li' + id).find('.mbupload_progress').remove();  
            // 上传结束  
            donePic(id);  

            var result = $.parseJSON(e.target.response);  
            if (result.errCode == 0) {  
                var input = '<input type="hidden" id="input' + result.data.id + '" name="picIds[]" value="' + result.data.picId + '">';  
                if(type == 'replyForm'){  
                    $('#replyForm').append(input);  
                }else{  
                    $(objUploadImg.formHtmlId).append(input);  
                }  

            } else {  
                objGlobal.DIC.dialog({content:'网络不稳定，请稍后重新操作', autoClose:true});  
                removePic(id);  
                //更新剩余上传数  
                objUploadImg.uploadRemaining();  
                delete objUploadImg.uploadInfo[id];  
                // 如果传略失败，上传个数少于限制张数则再显示加号  
                if (objUploadImg.countUpload() < objUploadImg.maxUpload) {  
                    $(objUploadImg.formHtmlId + ' .mbupload_addPic').show();  
                }  
            }  
        }  

        var failed = function() {  
            objGlobal.DIC.dialog({content:'网络断开，请稍后重新操作', autoClose:true});  
            removePic(id)  
        }  

        var abort = function() {  
            objGlobal.DIC.dialog({content:'上传已取消', autoClose:true});  
            removePic(id)  
        }  

        // 创建 ajax 请求  
        objUploadImg.xhr[id] = new XMLHttpRequest();  
        objUploadImg.xhr[id].addEventListener("progress", progress, false);  
        objUploadImg.xhr[id].upload.addEventListener("progress", progress, false);  
        objUploadImg.xhr[id].addEventListener("load", complete, false);  
        objUploadImg.xhr[id].addEventListener("abort", abort, false);  
        objUploadImg.xhr[id].addEventListener("error", failed, false);  
        objUploadImg.xhr[id].open("POST", uploadUrl);  
        objUploadImg.xhr[id].send(formData);  
    };  

    // 不能上传系统提示  
    objUploadImg.checkUploadBySysVer = function() {  
        var mb_os = objGlobal.checkUA();  
        if (mb_os.ios && mb_os.version.toString() < '6.0') {  
            objGlobal.DIC.dialog({content:'手机系统不支持传图，请升级到ios6.0以上', autoClose:true});  
            return false;  
        }  

        if (mb_os.wx && mb_os.wxVersion.toString() < '5.2') {  
            objGlobal.DIC.dialog({content:'当前微信版本不支持传图，请升级到最新版', autoClose:true});  
            return false;  
        }  
        return true;  
    };  

    //根据是否可以多图上传生成对应的input  
    objUploadImg.uploadAddInput = function(){  
        var input = "", fistInput = "";  
        if(objUploadImg.uploadPicMore){  
            input = '<input type="file" class="mbupload_on mbupload_uploadFile" accept="image/*" multiple="">';  
            fistInput = '<input type="file" class="fistUpload" accept="image/*" multiple="">';  
        }else{  
            input = '<input type="file" class="mbupload_on mbupload_uploadFile" accept="image/*" single="">';  
            fistInput = '<input type="file" class="fistUpload" accept="image/*" single="">';  
        }  
        $(objUploadImg.formHtmlId + ' .mbupload_addPic').append(input);  
        $(objUploadImg.formHtmlId + ' .iconSendImg').append(fistInput);  
    };  

    //剩余上传数  
    objUploadImg.uploadRemaining = function(){  
        var uploadNum = 0;  
        uploadNum = $(objUploadImg.formHtmlId + ' .mbupload_photoList').find('li').length;  

        var canOnlyUploadNum = objUploadImg.maxUpload;  

        if(uploadNum <= objUploadImg.maxUpload)  
        {  
            canOnlyUploadNum = objUploadImg.maxUpload - uploadNum + 1;  
        }  
        else  
        {  
            canOnlyUploadNum = 0;  
        }  

        //当上传出错则显示第一上传页面  
        if(canOnlyUploadNum == objUploadImg.maxUpload)  
        {  
            $(objUploadImg.formHtmlId + ' .mbupload_photoList').hide();  
            $(objUploadImg.formHtmlId + ' .mbupload_bgimg').show();  
        }  

        //更新剩余可上传图片数  
        $(objUploadImg.formHtmlId + ' .mbupload_onlyUploadNum').html(canOnlyUploadNum);  
    };  

    // 检查图片大小  
    objUploadImg.checkPicSize = function(file) {  
        var uploadPicSize = objUploadImg.uploadPicSize*1024*1024;  
        if (file.size > uploadPicSize) {  
            return false;  
        }  
        return true;  
    };  

    // 检查图片类型  
    objUploadImg.checkPicType = function(file) {  
        var photoReg = (/\.png$|\.bmp$|\.jpg$|\.jpeg$|\.gif$/i);  
        if(!photoReg.test(file.name)){  
           return false;  
        }else{  
            return true;  
        }  
    };  

    var uploadTimer = null;  

    var initUpload = function()  
    {  
        // 上传图片的绑定  
        $(objUploadImg.formHtmlId + ' .mbupload_addImg').on("click", function(){  
            if(!objUploadImg.checkUploadBySysVer()){  
                return false;  
            }  
        });  

        $(objUploadImg.formHtmlId + ' .mbupload_uploadFile').on("click", function(){  
            var thisObj = $(this);  
            if (objUploadImg.isEncoderBusy) {  
                return false;  
            }  
            else if (objUploadImg.isBusy) {  
                objGlobal.DIC.dialog({content:'上传中，请稍后添加', autoClose:true});  
                return false;  
            }  
            else if (objUploadImg.isMoreBusy) {  
                objGlobal.DIC.dialog({content:'上传中，请稍后添加', autoClose:true});  
                return false;  
            }  
        });  

        //首次点击图片的图标，触发一次手机的默认上传事件  
        $('body').on('change', objUploadImg.formHtmlId + ' .fistUpload', function(e){  
            $(objUploadImg.formHtmlId + ' .mbupload_photoList').show();  
            $(objUploadImg.formHtmlId + ' .mbupload_bgimg').hide();  
        });  

        // 文件表单发生变化时  
        $('body').on('change', objUploadImg.formHtmlId + ' .mbupload_uploadFile,' + objUploadImg.formHtmlId + ' .fistUpload', function(e) {  
            //执行图片预览、压缩定时器  
            uploadTimer = setInterval(function() {  
                // 预览  
                setTimeout(function() {  
                    if (!objUploadImg.isEncoderBusy && objUploadImg.previewQueue.length) {  
                        var jobId = objUploadImg.previewQueue.shift();  
                        objUploadImg.isEncoderBusy = true;  
                        objUploadImg.uploadPreview(jobId);  
                    }  
                }, 1);  

                // 上传  
                setTimeout(function() {  
                    if (!objUploadImg.isBusy && objUploadImg.uploadQueue.length) {  
                        var jobId = objUploadImg.uploadQueue.shift();  
                        objUploadImg.isBusy = true;  
                        if(objUploadImg.uploadPicMore){  
                            objUploadImg.isMoreBusy = true;  
                        }  
                        objUploadImg.createUpload(jobId, objUploadImg.formHtmlId, uploadTimer);  
                    }  
                }, 10);  
            }, 300);  

            e = e || window.event;  
            var fileList = e.target.files;  

            if (!fileList.length) {  
                //更新剩余上传数  
                objUploadImg.uploadRemaining();  
                $(this).val('');  
                return false;  
            }  

            if (objUploadImg.uploadPicMore && (fileList.length > objUploadImg.onceMaxUpload)) {  
                objGlobal.DIC.dialog({content:'上传图片一次最多只能选' + objUploadImg.onceMaxUpload + '张', autoClose:true});  
                //更新剩余上传数  
                objUploadImg.uploadRemaining();  
                $(this).val('');  
                return false;  
            }  

            if (objUploadImg.uploadPicMore && (fileList.length > (objUploadImg.maxUpload - objUploadImg.countUpload()))) {  
                objGlobal.DIC.dialog({content:'你最多只能上传' + objUploadImg.maxUpload + '张照片', autoClose:true});  
                //更新剩余上传数  
                objUploadImg.uploadRemaining();  
                $(this).val('');  
                return false;  
            }  

            for (var i = 0; i < fileList.length; i++) {  
                if (objUploadImg.countUpload() >= objUploadImg.maxUpload) {  
                    objGlobal.DIC.dialog({content:'你最多只能上传' + objUploadImg.maxUpload + '张照片', autoClose:true});  
                    //更新剩余上传数  
                    objUploadImg.uploadRemaining();  
                    $(this).val('');  
                    break;  
                }  

                var file = fileList[i];  

                if (!objUploadImg.checkPicType(file)) {  
                    objGlobal.DIC.dialog({content:'上传照片格式不支持', autoClose:true});  
                    //更新剩余上传数  
                    objUploadImg.uploadRemaining();  
                    $(this).val('');  
                    continue;  
                }  
                // console.log(file);  
                if (!objUploadImg.checkPicSize(file)) {  
                    objGlobal.DIC.dialog({content:'图片大小超过'+ objUploadImg.uploadPicSize + 'MB', autoClose:true});  
                    //更新剩余上传数  
                    objUploadImg.uploadRemaining();  
                    $(this).val('');  
                    continue;  
                }  

                var id = Date.now() + i;  
                // 增加到上传对象中, 上传完成后，修改为 true  
                objUploadImg.uploadInfo[id] = {  
                    oldFileInfo: file,  
                    file: file,  
                    isDone: false,  
                };  

                var html = '<li id="li' + id + '"><div class="mbupload_photoCut"><img src="' + objUploadImg.uploadDefaultImgUrl + '" class="attchImg" alt="photo"></div>' +  
                        '<div class="mbupload_maskLay"></div>' +  
                        '<div class="mbupload_maskTxt">图片压缩中...</div>' +  
                        '<a href="javascript:;" class="mbupload_cBtn mbupload_pa mbupload_db" title="" _id="'+id+'">关闭</a></li>';  
                $(objUploadImg.formHtmlId + ' .mbupload_addPic').before(html);  

                objUploadImg.previewQueue.push(id);  

                // 图片已经上传了 最大限制 张数，隐藏 + 号  
                if (objUploadImg.countUpload() >= objUploadImg.maxUpload) {  
                    $(objUploadImg.formHtmlId + ' .mbupload_addPic').hide();  
                }  
                //更新剩余上传数  
                setTimeout(function(){  
                    objUploadImg.uploadRemaining();  
                }, 400);  
            }  
            // 把输入框清空  
            $(this).val('');  
        });  

        $(objUploadImg.formHtmlId + ' .mbupload_photoList').on('click', '.mbupload_cBtn', function() {  
            var id = $(this).attr('_id');  

            // 取消这个请求  
            if (objUploadImg.xhr[id]) {  
                objUploadImg.xhr[id].abort();  
            }  
            // 图片删除  
            $(objUploadImg.formHtmlId + ' #li' + id).remove();  
            // 表单中删除  
            $(objUploadImg.formHtmlId + ' #input' + id).remove();  
            objUploadImg.uploadInfo[id] = null;  

            // 图片变少了，显示+号  
            if (objUploadImg.countUpload() < objUploadImg.maxUpload) {  
                $(objUploadImg.formHtmlId + ' .mbupload_addPic').show();  
            }  
            //更新剩余上传数  
            objUploadImg.uploadRemaining();  

            //当删除所有图片后隐藏添加图片的图标  
            if($(objUploadImg.formHtmlId + ' .mbupload_photoList').find('li').length < 2){  
                $(objUploadImg.formHtmlId + ' .mbupload_photoList').hide();  
                $(objUploadImg.formHtmlId + ' .mbupload_bgimg').show();  
            }  
        });          
    };  

    objUploadImg.uploadAddInput();  
    objUploadImg.uploadRemaining();  
    initUpload();  
};
21 赞 关注 分享
BoredApe 豆花饭 明天过后 Helinull YunFanChen MooGu 4***@qq.com damdmen 风雨 Trust 我系阿荣 雷小达 4***@qq.com 雪之梦技术驿站 t***@qq.com y***@qq.com c***@163.com 林溪 MR不靠谱 2***@qq.com kenyk

    19 个评论

要回复文章请先登录或注册

1***@qq.com

1***@qq.com

有问题可以找我，一起学习吧

我的个人项目已经上线了，我使用的是七牛云存储（阿里也不错的），大概原理也一样吧，你们可以看看，很多功能都有了。

1、Android的（软著没申请下来，暂时上不了架）：http://d.firim.top/tc7b?utm_source=fir&utm_medium=qrhttp://d.firim.top/tc7b?utm_source=fir&utm_medium=qr

2、iOS已经上架搜索：猫云—优质贴心的宠物平台

3、顺便也给你们给链接吧，例如iOS做唤起第三方或某个APP时可以使用到 https://apps.apple.com/cn/app/猫云-优质贴心的宠物社交平台/id1474103355
2021-02-09 10:20
9***@qq.com

9***@qq.com

回复 44596296 ：
这个问题解决了吗，我也遇到同样的问题
2017-11-17 17:22
44596296

44596296

这个例子在普通pc测试都可以，但是在真机测试的时候就总是报网络错误，上传失败之类的，请问是怎么回事
2017-07-10 14:15
1***@qq.com

1***@qq.com

mark
2017-03-23 00:19
8***@qq.com

8***@qq.com

我用微信浏览器和qq浏览器直接打开demo无法使用
2016-11-04 13:07
8***@qq.com

8***@qq.com

5s在浏览器打开页面不支持？
2016-11-04 13:05
yungehaha

yungehaha

上传格式不支持怎么回事
2016-10-24 11:02
雷小达

雷小达

mark
2016-09-22 16:28
风雨

风雨

咨询下为什么在微信下面就不能拍照和多选照片呢。手机浏览器没问题。
2016-07-03 00:27
damdmen

damdmen

mark
2016-06-28 19:17
友情链接
优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

| | 违法违规信息举报