图片和文件上传js剖析

标签：led   nload   按钮   frame   open   content   oca   turn   缩略图   

/**
 * 商户资质信息模块js
 *
 * 涉及页面组件 {
 *      上传组件（UploadFileComponent）
 * }
 *
 *
 * 初始化工具（init）
 *
 * @Author:Waver
 */
var qualificationInfoModule = (function() {

    // 上传文件类型
    var UPLOAD_FILE_TYPE = {
        BUSSINESS_LICENSE: ‘BUSSINESS_LICENSE‘,
        ORGANIZATION_CODE: ‘ORGANIZATION_CODE‘,
        TAX_REGISTRATION: ‘TAX_REGISTRATION‘,
        BANK_ACCOUNT_LICENCE: ‘BANK_ACCOUNT_LICENCE‘,
        ID_CARD_FRONT: ‘ID_CARD_FRONT‘,
        ID_CARD_BACK: ‘ID_CARD_BACK‘,
        PAYMENT_BUSINESS_LICENSE: ‘PAYMENT_BUSINESS_LICENSE‘,
        SHOP_PLACE: ‘SHOP_PLACE‘,
        SHOP_FRONT: ‘SHOP_FRONT‘,
        SHOP_CASHIER: ‘SHOP_CASHIER‘,
        APPLY: ‘APPLY‘,
        OPTIONAL: ‘OPTIONAL‘
    }

    var fileTypeMap = new Map([
        [UPLOAD_FILE_TYPE.BUSSINESS_LICENSE , ‘imgBusinessLicense‘],
        [UPLOAD_FILE_TYPE.ORGANIZATION_CODE , ‘imgOrganizationCode‘],
        [UPLOAD_FILE_TYPE.TAX_REGISTRATION , ‘imgTaxRegistration‘],
        [UPLOAD_FILE_TYPE.BANK_ACCOUNT_LICENCE , ‘imgBankAccountLicence‘],
        [UPLOAD_FILE_TYPE.ID_CARD_FRONT , ‘imgIdCardFront‘],
        [UPLOAD_FILE_TYPE.ID_CARD_BACK , ‘imgIdCardBack‘],
        [UPLOAD_FILE_TYPE.PAYMENT_BUSINESS_LICENSE , ‘‘],
        [UPLOAD_FILE_TYPE.SHOP_PLACE , ‘imgShopPlace‘],
        [UPLOAD_FILE_TYPE.SHOP_FRONT , ‘imgShopFront‘],
        [UPLOAD_FILE_TYPE.SHOP_CASHIER , ‘imgShopCashier‘],
        [UPLOAD_FILE_TYPE.APPLY , ‘imgApply‘],
        [UPLOAD_FILE_TYPE.OPTIONAL , ‘optional‘]
    ]);

    var uploadFileComponentMap = new Map();
    // 申请表资质上传组件列表
    var applyUploadFileComponent = new Array();
    // 其他资质上传组件列表
    var optionalUploadFileComponent = new Array();

    //ajaxuploadfile插件input[type=‘file‘]对应的id属性的number
    var uploadFileNum = 0
    function UploadFileComponent(uploadFileDiv) {

        var uploadFileObj = null;
        // 上传文件类型
        var uploadFileType = null;
        // 文件上传后对应路径的隐藏域ID
        var filePathHiddenId = null;

        +function(uploadFileDiv) {
            uploadFileObj = $(uploadFileDiv);
            uploadFileType = uploadFileObj.attr(‘file-type‘);
        }(uploadFileDiv);

        // 为上传组件添加表单
        var addForm = function() {
            uploadFileNum ++
            var text = ‘<form id="‘ + uploadFileObj.attr(‘file-type‘) + ‘FORM" action="/app/yqt/op/chain/register/upload" enctype="multipart/form-data" method="post">‘
                + ‘<input type="file" class="upload-file-input" id="uploadFile_‘+uploadFileNum+‘" name="uploadFile" aria-invalid="false">‘
                + ‘<img src="" class="upload-img-file upload-file-show" data-src="" style="z-index: 999; display: none;">‘
                + ‘<a class="delete-image-btn" style="display: none;"></a>‘// 删除按钮
                + ‘<a class="change-image-btn" style="display: none;"></a>‘// 点击查看放大图片
                + ‘<p class="validation-error"><p/>‘
                + ‘</form>‘;
            uploadFileObj.find(‘.upload-photo-name‘).after(text);

            bind_change_event_for_file_input();

            // 添加点击删除事件
            bind_click_event_for_delete_btn();
            return uploadFileNum
        }

        var bind_change_event_for_file_input = function() {
            uploadFileObj.find(‘.upload-file-input‘).change(function() {
                uploadFile(this);
            });

            //  点击按钮重新上传文件（优化点3）
            uploadFileObj.find(‘.change-image-btn‘).click(function(){
                $(this).parent().find(".upload-file-input").attr("disabled",false)
                $(this).parent().find(".upload-file-input").eq(0).trigger("click")
                uploadFile(this.previousSibling.previousSibling.previousSibling);
            });
        }


        //app/yqt/op/chain/register/download 下载图片路径
        ///app/yqt/op/chain/register/uploadImg 上传图片路径
        //app/yqt/op/chain/register/uploadFile 上传文件（zip，rar，pdf）路径
        //    上传文件
        var uploadFile = function(inputFileObj) {
            console.log(inputFileObj.files[0].name.split(".")[inputFileObj.files[0].name.split(".").length-1])
            if(inputFileObj.files[0] == undefined){
                return;
            }
            // 只允许上传jpg  jpeg   gif  png类型的图片
            var pattern=/\.(pdf|jpg|jpeg|gif|png)$/;
            //上传 pdf，zip，rar
            var patternTwo = /\.(pdf|zip|rar)$/
            // 只允许上传zip pdf文件
            var patternThree = /\.(zip|rar)$/
            if($(inputFileObj).next().attr("src") == "" || $(inputFileObj).next().attr("src") == "undefined"){
                console.log($(inputFileObj).next().attr("src") == "")
            }else{
                console.log($(inputFileObj).next().attr("src") == "undefined")
            }
            if(pattern.test(inputFileObj.files[0].name) == false && patternTwo.test(inputFileObj.files[0].name) == false){// 上传了非制定类型的图片
                $.alert({
                    title:"",
                    content:"文件格式错误,请重新选择",
                    buttons:{
                        ‘确定‘:function(){
                            $("body").mLoading("hide");
                        }
                    }
                });
                return;
            }

            //在非资质信息区域上传rar和zip文件
            if(patternThree.test(inputFileObj.files[0].name) && !($(inputFileObj).parent().parent().parent().attr("file-type") == "OPTIONAL")){
                console.log("只有资质照片才能上传zip和rar")
                YEEPAY.popTosure({
                    msg : "只有其他资质照片才可以传zip或rar文件",
                    btnNumber: ‘one‘
                })
            }// 非图片上传和下载√
            else if(patternTwo.test(inputFileObj.files[0].name)){
                var qualificationType = uploadFileObj.attr(‘file-type‘);

                var fileType = inputFileObj.files[0].name.split(".")[inputFileObj.files[0].name.split(".").length-1]

                // 上传文件前，禁用提交按钮
                if(‘CHAIN_HEAD_REGISTER‘ == opType) {
                    $(‘#submit_test‘).attr(‘disabled‘, true);
                } else {
                    $(‘#registerSubmit‘).attr(‘disabled‘, true);
                }

                //  上传非图片(调用函数)
                ajaxFileUpload(inputFileObj)
                function ajaxFileUpload(inputFileObj){
                    $.ajaxFileUpload({
                        url:contextPath +"/app/yqt/op/chain/register/uploadFile",
                        type: "post",
                        data : {
                            fileType: fileType,
                            qualificationType: qualificationType || ""
                        },
                        dataType: ‘json‘,
                        secureuri: false, //一StringToEnumConverterFactory般设置为false
                        fileElementId: $(inputFileObj).attr("id"), // 上传文件的id属性名
                        success: function(data, status){
                            console.log(data)
                            removeUploadFile();

                            if(fileType == "zip" || fileType == "rar"){
                                uploadFileObj.find(‘.upload-img-file‘).attr("data-src", data.filepath);
                                uploadFileObj.find(‘.upload-img-file‘).attr("src", contextPath + "/dist/images/zip.png");
                            }
                            if(fileType == "pdf"){
                                uploadFileObj.find(‘.upload-img-file‘).attr("data-src", data.filepath);
                                uploadFileObj.find(‘.upload-img-file‘).attr("src", contextPath + "/dist/images/pdf.png");
                            }

                            // 添加图片路径隐藏域(后台需要)
                            $(‘#opRegisterForm‘).append(‘<input type="hidden" id="‘ + getFilePathHiddenId() + ‘" name="‘ + fileTypeMap.get(qualificationType) + ‘" value="‘ + data.filepath + ‘" />‘);


                            //显示图片  显示button
                            uploadFileObj.find(‘.upload-img-file‘).show();
                            uploadFileObj.find(‘.delete-image-btn‘).show();
                            uploadFileObj.find(‘.change-image-btn‘).show();

                            //下载zip和pdf
                            var downFunc = uploadFileObj.find(‘.upload-img-file‘).click(function(){
                                    var _this = this
                                    var downObj = $(_this)
                                    YEEPAY.popTosure()
                                    $(".sureDownload").click(function(){
                                        window.location.href = contextPath + ‘/app/yqt/op/chain/register/download?fileRelativePath=‘ + downObj.attr("data-src")
                                    })
                            });
                            //downFun = null

                            // 上传文件成功后，恢复提交按钮
                            if(‘CHAIN_HEAD_REGISTER‘ == opType) {
                                $(‘#submit_test‘).attr(‘disabled‘, false);
                            } else {
                                $(‘#registerSubmit‘).attr(‘disabled‘, false);
                            }
                        },
                        error: function(data, status, e){
                            alert(e);
                            // 上传文件失败后，恢复提交按钮
                            if(‘CHAIN_HEAD_REGISTER‘ == opType) {
                                $(‘#submit_test‘).attr(‘disabled‘, false);
                            } else {
                                $(‘#registerSubmit‘).attr(‘disabled‘, false);
                            }
                        }
                    });
                }
                return
            }
             else {

                //lrz实现本地压缩后上传图片
                lrz(inputFileObj.files[0], {width: 1024, quality: 0.8}).then(function (rst) {
                    sourceSize = toFixed2(inputFileObj.files[0].size / 1024);
                    resultSize = toFixed2(rst.fileLen / 1024);// fielLen返回的是文件的长度
                    scale = parseInt(100 - (resultSize / sourceSize * 100));
                    //alert(sourceSize+"->"+resultSize+",scale:"+scale);
                    var form = $(inputFileObj).parent();
                    //资质文件类型
                    var qualificationType = uploadFileObj.attr(‘file-type‘);
                    //上传文件类型
                    var fileType = inputFileObj.files[0].name.split(".")[inputFileObj.files[0].name.split(".").length - 1]

                    // 上传文件前，禁用提交按钮
                    if(‘CHAIN_HEAD_REGISTER‘ == opType) {
                        $(‘#submit_test‘).attr(‘disabled‘, true);
                    } else {
                        $(‘#registerSubmit‘).attr(‘disabled‘, true);
                    }

                    Common.ajax(contextPath + ‘/app/yqt/op/chain/register/uploadImg‘, ‘POST‘,
                        {
                            fileData: rst.base64,
                            fileType: fileType,
                            qualificationType: qualificationType || ""
                        }, function (response) {
                            removeUploadFile()

                            //显示缩略图 换路径
                            uploadFileObj.find(‘.upload-img-file‘).attr("src", rst.base64);//这里显示的就是缩略图
                            //显示图片  显示button
                            uploadFileObj.find(‘.upload-img-file‘).show();
                            uploadFileObj.find(‘.delete-image-btn‘).show();
                            uploadFileObj.find(‘.change-image-btn‘).show();

                            // 这个是显示大图的
                            uploadFileObj.find(‘.upload-img-file‘).click(function () {
                                // 这个是弹出新窗口
                                window.open(‘/yqt-portal-app/app/yqt/merchant/manage/showImage?filePath=‘ + response.filepath, ‘_blank‘, "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes,height=600,width=800");
                            });

                            // 添加图片路径隐藏域(后台需要)
                            $(‘#opRegisterForm‘).append(‘<input type="hidden" id="‘ + getFilePathHiddenId() + ‘" name="‘ + fileTypeMap.get(qualificationType) + ‘" value="‘ + response.filepath + ‘" />‘);

                            // 禁用上传功能(每次点击都会调用这个方法，所以下次就仍旧可以上传)
                            uploadFileObj.find(‘.upload-file-input‘).attr(‘disabled‘, true); // 点击切换图片

                            // 上传文件成功后，恢复提交按钮
                            if(‘CHAIN_HEAD_REGISTER‘ == opType) {
                                $(‘#submit_test‘).attr(‘disabled‘, false);
                            } else {
                                $(‘#registerSubmit‘).attr(‘disabled‘, false);
                            }
                        }, function () {
                            uploadFileObj.find(‘.upload-file-input‘).val(‘‘);
                            // 上传文件失败后，恢复提交按钮
                            if(‘CHAIN_HEAD_REGISTER‘ == opType) {
                                $(‘#submit_test‘).attr(‘disabled‘, false);
                            } else {
                                $(‘#registerSubmit‘).attr(‘disabled‘, false);
                            }

                            $.alert({
                                title: "",
                                content: "图片上传失败或超时,请重试",
                                buttons: {
                                    ‘确定‘: function () {
                                        $("body").mLoading("hide");
                                    }
                                }
                            });
                        }, {
                            timeout: 180000,
                            async: true
                        });

                    return rst;
                }).catch(function (err) {
                    // 处理失败会执行
                }).always(function () {
                    // 不管是成功失败，都会执行
                });
            }
        }


        var toFixed2 = function(num) {
            return parseFloat(+num.toFixed(2));
        }

        var getUploadFileType = function() {
            return uploadFileType;
        }

        var setImage = function(imageFilePath) {

            var uploadFileType = getOrigUploadFileType(imageFilePath);

            if(!uploadFileType) {
                return;
            }

            //  先删除了一个，又添加了一个img
            uploadFileObj.find(‘.upload-img-file‘).remove();

            if(uploadFileType == ‘pdf‘) {
                uploadFileObj.find(‘.upload-file-input‘).after(‘<img src="‘ + contextPath + ‘/dist/images/pdf.png" class="upload-img-file upload-file-show" style="z-index: 999;">‘);
            } else if(uploadFileType == ‘zip‘ || uploadFileType == ‘rar‘) {
                uploadFileObj.find(‘.upload-file-input‘).after(‘<img src="‘ + contextPath + ‘/dist/images/zip.png" class="upload-img-file upload-file-show" style="z-index: 999;">‘);
            } else {
                uploadFileObj.find(‘.upload-file-input‘).after(‘<img src="‘ + imageFilePath + ‘" class="upload-img-file upload-file-show" style="z-index: 999;">‘);
            }

            // 显示删除按钮
            uploadFileObj.find(‘.delete-image-btn‘).show();
            uploadFileObj.find(‘.change-image-btn‘).show();
        }

        // 获取上传文件类型
        var getOrigUploadFileType = function(imageFilePath) {
            if(!imageFilePath || imageFilePath.length == 0) {
                return null;
            }
            var fileTypePos = imageFilePath.lastIndexOf(‘.‘);
            if(fileTypePos > -1) {
                return imageFilePath.substring(fileTypePos + 1);
            } else {
                return null;
            }
        }

        // 是否支持下载
        var isDownload = function(imageFilePath) {
            var fileType = getOrigUploadFileType(imageFilePath);

            if(!fileType) {
                return false;
            }

            // pdf、zip、rar支持下载
            var pattern = /^(pdf|zip|rar)$/;

            return pattern.test(fileType);
        }

        // 禁用上传功能
        var disableUploading = function() {
            uploadFileObj.find(‘.upload-file-input‘).attr(‘disabled‘, true);
        }
        //使用上传功能
        var enableUploading = function() {
            //控制disable属性
            uploadFileObj.find(‘.upload-file-input‘).attr(‘disabled‘, false);
            uploadFileObj.find(‘.upload-file-input‘).val(‘‘);
        }

        // 为删除按钮绑定click事件
        var bind_click_event_for_delete_btn = function() {
            uploadFileObj.find(‘.delete-image-btn‘).click(function() {
                removeUploadFile();
            });
        }

        // 删除已经上传的图片
        var removeUploadFile = function() {

            var uploadFileHidden = $(‘#opRegisterForm‘).find(‘input[id="‘ + getFilePathHiddenId() + ‘"]‘);
            var uploadFilePath;
            if(uploadFileHidden) {
                //获取上传文件路径
                uploadFilePath = uploadFileHidden.val();
                // 删除增加上传文件路径对应的hidden
                uploadFileHidden.remove();
            }

            if(uploadFilePath) {
                // 增加待删除文件路径对应的hidden
                $(‘#opRegisterForm‘).append(‘<input type="hidden" name="delete_op_img" value="‘ + uploadFilePath + ‘">‘);
            }
            // 移除图片显示
            removeImage();
            // 启用上传功能
            enableUploading();
        }

        var removeImage = function() {
            uploadFileObj.find(‘.upload-img-file‘).hide();
            uploadFileObj.find(‘.delete-image-btn‘).hide();
            uploadFileObj.find(‘.change-image-btn‘).hide();
            uploadFileObj.find(‘.upload-img-file‘).off(‘click‘,null)
        }


        var getFilePathHiddenId = function() {
            return filePathHiddenId;
        }

        var setFilePathHiddenId = function(hiddenId) {
            filePathHiddenId = hiddenId;
        }

        var getUploadFileObj = function() {
            return uploadFileObj;
        }


        return {
            addForm : addForm,
            getUploadFileType : getUploadFileType,
            setImage : setImage,
            disableUploading : disableUploading,
            getFilePathHiddenId : getFilePathHiddenId,
            setFilePathHiddenId : setFilePathHiddenId,
            getUploadFileObj : getUploadFileObj,
            removeUploadFile : removeUploadFile,
            getOrigUploadFileType : getOrigUploadFileType,
            isDownload : isDownload
        }
    }



    //
    var getUploadFileComponentMap = function() {
        return uploadFileComponentMap;
    }

    // 校验必传资质文件是否上传
    var validateUploadingFile = function() {

        var result = true; // 校验结果

        $.each(UPLOAD_FILE_TYPE, function(key, value) {

            if(UPLOAD_FILE_TYPE.BUSSINESS_LICENSE == value) {
                // 检查营业执照号是否填写，如果填写，营业执照资质必须上传
                if($(‘#businessLicence‘).val() != null && $(‘#businessLicence‘).val().trim() != ‘‘) {
                    if(!_validate(value)) {
                        result = false;
                    }
                } else {
                    // 清除原有校验提示信息
                    var uploadFileComponent = uploadFileComponentMap.get(value);
                    uploadFileComponent.getUploadFileObj().find(‘.validation-error‘).text(‘‘);
                }
            } else if(UPLOAD_FILE_TYPE.ORGANIZATION_CODE == value) {
                // 检查组织机构代码证是否填写，如果填写，组织机构代码证资质必须上传
                if($(‘#orgCode‘).val() != null && $(‘#orgCode‘).val().trim() != ‘‘) {
                    if(!_validate(value)) {
                        result = false;
                    }
                } else {
                    // 清除原有校验提示信息
                    var uploadFileComponent = uploadFileComponentMap.get(value);
                    uploadFileComponent.getUploadFileObj().find(‘.validation-error‘).text(‘‘);
                }
            } else if(UPLOAD_FILE_TYPE.TAX_REGISTRATION == value) {
                // 检查税务登记证是否填写，如果填写，税务登记证资质必须上传
                if($(‘#taxCode‘).val() != null && $(‘#taxCode‘).val().trim() != ‘‘) {
                    if(!_validate(value)) {
                        result = false;
                    }
                } else {
                    // 清除原有校验提示信息
                    var uploadFileComponent = uploadFileComponentMap.get(value);
                    uploadFileComponent.getUploadFileObj().find(‘.validation-error‘).text(‘‘);
                }
            } else if(UPLOAD_FILE_TYPE.ID_CARD_FRONT == value) {
                if(!_validate(value)) {
                    result = false;
                }
            } else if(UPLOAD_FILE_TYPE.ID_CARD_BACK == value) {
                if(!_validate(value)) {
                    result =false;
                }
            } else if(UPLOAD_FILE_TYPE.APPLY == value) {
                if(!_validate(value)) {
                    result = false;
                }
            } else if(UPLOAD_FILE_TYPE.PAYMENT_BUSINESS_LICENSE == value) {
                // 代理商类型为支付机构时，支付许可证必须上传
                if($(‘input[name="oPOperatorParam[\‘agentType\‘]"]:checked‘).val()) {
                    if(‘AGENT_PAYMENT‘ == $(‘input[name="oPOperatorParam[\‘agentType\‘]"]:checked‘).val()) {
                        if(!_validate(value)) {
                            result = false;
                        }
                    } else {
                        // 清除原有校验提示信息
                        var uploadFileComponent = uploadFileComponentMap.get(value);
                        uploadFileComponent.getUploadFileObj().find(‘.validation-error‘).text(‘‘);
                    }
                }
            }

        });

        return result;
    }

    // 门店入网页，校验必传资质文件是否上传
    var validateUploadingFileForChain = function() {

        var result = true; // 校验结果

        $.each(UPLOAD_FILE_TYPE, function(key, value) {

            if(UPLOAD_FILE_TYPE.APPLY == value) {
                if(!_validate(value)) {
                    result = false;
                }
            }
        });

        return result;
    }

    var _validate = function(uploadFileType) {

        var result = true; // 校验结果

        if(UPLOAD_FILE_TYPE.APPLY == uploadFileType) {// 上传文件类型

            var flag = true;

            $.each(applyUploadFileComponent, function (index, component) {
                var inputFileObj = component.getUploadFileObj().find(‘input[type=file]‘);

                if($(‘#opRegisterForm‘).find(‘input[id=‘ + uploadFileType + ‘_‘ + (index + 1) +‘]‘)[0]) {
                    flag = false;
                }
            });

            if(flag) {
                applyUploadFileComponent[0].getUploadFileObj().find(‘.validation-error‘).text(‘请上传文件!‘);
                result = false;
            } else {
                applyUploadFileComponent[0].getUploadFileObj().find(‘.validation-error‘).text(‘‘);
            }
        } else if(UPLOAD_FILE_TYPE.OPTIONAL == uploadFileType) {

        } else if(UPLOAD_FILE_TYPE.ID_CARD_FRONT == uploadFileType || UPLOAD_FILE_TYPE.ID_CARD_BACK == uploadFileType) {

            var uploadFileComponent = uploadFileComponentMap.get(UPLOAD_FILE_TYPE.ID_CARD_FRONT);

            if($(‘#opRegisterForm‘).find(‘input[id=‘+ UPLOAD_FILE_TYPE.ID_CARD_FRONT + ‘]‘)[0] || $(‘#opRegisterForm‘).find(‘input[id=‘+ UPLOAD_FILE_TYPE.ID_CARD_BACK + ‘]‘)[0]) {
                // 清除校验信息
                uploadFileComponent.getUploadFileObj().find(‘.validation-error‘).text(‘‘);
            } else {
                // 提示校验信息
                uploadFileComponent.getUploadFileObj().find(‘.validation-error‘).text(‘请上传文件!‘);
                result = false;
            }
        }else {
            var uploadFileComponent = uploadFileComponentMap.get(uploadFileType);

            if($(‘#opRegisterForm‘).find(‘input[id=‘+ uploadFileType + ‘]‘)[0]) {
                // 清除校验信息
                uploadFileComponent.getUploadFileObj().find(‘.validation-error‘).text(‘‘);
            } else {
                // 提示校验信息
                uploadFileComponent.getUploadFileObj().find(‘.validation-error‘).text(‘请上传文件!‘);
                result = false;
            }
        }

        return result;
    }

    // 初始化组件
    var init = (function() {
        return {
            initialize : function() {

                uploadFileComponentMap.set(UPLOAD_FILE_TYPE.APPLY, applyUploadFileComponent);
                uploadFileComponentMap.set(UPLOAD_FILE_TYPE.OPTIONAL, optionalUploadFileComponent);

                $(‘.pic-module .upload-photo‘).each(function(index, uploadPhotoDiv) {
                    var uploadFileComponent = new UploadFileComponent(uploadPhotoDiv);
                    uploadFileComponent.addForm();

                    // 将上传组件添加到map中
                    if(UPLOAD_FILE_TYPE.APPLY == uploadFileComponent.getUploadFileType()) {
                        applyUploadFileComponent.push(uploadFileComponent);
                        uploadFileComponent.setFilePathHiddenId(UPLOAD_FILE_TYPE.APPLY + ‘_‘ + applyUploadFileComponent.length);
                    } else if(UPLOAD_FILE_TYPE.OPTIONAL == uploadFileComponent.getUploadFileType()) {
                        optionalUploadFileComponent.push(uploadFileComponent);
                        uploadFileComponent.setFilePathHiddenId(UPLOAD_FILE_TYPE.OPTIONAL + ‘_‘ + optionalUploadFileComponent.length);
                    } else {
                        uploadFileComponentMap.set(uploadFileComponent.getUploadFileType(), uploadFileComponent);
                        uploadFileComponent.setFilePathHiddenId(uploadFileComponent.getUploadFileType());
                    }
                });

                // 添加按钮绑定事件
                $(‘.pic-module .add-upload-photo‘).each(function(index, addUploadPhotoLi) {
                    var fileType = $(addUploadPhotoLi).attr(‘file-type‘);
                    // 申请表资质信息添加按钮事件
                    if(UPLOAD_FILE_TYPE.APPLY == fileType) {
                        $(addUploadPhotoLi).click(function() {
                            if(applyUploadFileComponent.length < 2) {
                                var text = ‘<li class="upload-photo" file-type="APPLY"><div class="upload-block">‘
                                    + ‘<div class="upload-photo-name">‘
                                    + ‘<span class="iconfont icon-tianjiatupian"></span>‘
                                    + ‘<p>申请表</p></div></div></li>‘;

                                $(addUploadPhotoLi).before(text);

                                var uploadPhotoLi = $(‘.pic-module .apply-frame‘).find(‘.upload-photo:last‘);

                                var uploadFileComponent = new UploadFileComponent(uploadPhotoLi);
                                uploadFileComponent.addForm();

                                applyUploadFileComponent.push(uploadFileComponent);

                                uploadFileComponent.setFilePathHiddenId(UPLOAD_FILE_TYPE.APPLY + ‘_‘ + applyUploadFileComponent.length);
                            }
                            if (applyUploadFileComponent.length == 2) {
                                $(addUploadPhotoLi).hide();
                            }
                        });
                        // 其他资质信息添加按钮事件
                    } else if(UPLOAD_FILE_TYPE.OPTIONAL == fileType) {
                        $(addUploadPhotoLi).click(function () {
                            if (optionalUploadFileComponent.length < 10) {
                                var text = ‘<li class="upload-photo" file-type="OPTIONAL"><div class="upload-block">‘
                                    + ‘<div class="upload-photo-name">‘
                                    + ‘<span class="iconfont icon-tianjiatupian"></span>‘
                                    + ‘<p>其他</p></div></div></li>‘;

                                $(addUploadPhotoLi).before(text);

                                var uploadPhotoLi = $(‘.pic-module .optional-frame‘).find(‘.upload-photo:last‘);

                                var uploadFileComponent = new UploadFileComponent(uploadPhotoLi);
                                uploadFileComponent.addForm();

                                optionalUploadFileComponent.push(uploadFileComponent);

                                uploadFileComponent.setFilePathHiddenId(UPLOAD_FILE_TYPE.OPTIONAL + ‘_‘ + optionalUploadFileComponent.length);
                            }
                            if (optionalUploadFileComponent.length == 10) {
                                $(addUploadPhotoLi).hide();
                            }
                        });
                    }
                });

                // 加载已经上传的资质图片
                if(initData.qualification) {

                    $.each(UPLOAD_FILE_TYPE, function(key, value) {

                        if(initData.qualification[value]) {

                            if (UPLOAD_FILE_TYPE.APPLY == value) { // 这个的应用信息
                                $.each(applyUploadFileComponent, function (index, component) {
                                    if(initData.qualification[value][index]) {
                                        component.setImage(‘/yqt-portal-app/app/yqt/merchant/manage/showImage?filePath=‘ + initData.qualification[value][index]);
                                        component.disableUploading();

                                        var uploadFileObj = component.getUploadFileObj();

                                        if(component.isDownload(initData.qualification[value][index])) {
                                            uploadFileObj.find(‘.upload-img-file‘).click(function () {
                                                window.location.href = contextPath + ‘/app/yqt/op/chain/register/download?fileRelativePath=‘ + initData.qualification[value][index];
                                            })
                                        } else {
                                            uploadFileObj.find(‘.upload-img-file‘).click(function () {
                                                window.open(‘/yqt-portal-app/app/yqt/merchant/manage/showImage?filePath=‘ + initData.qualification[value][index], ‘_blank‘,"scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes,height=600,width=800");
                                            })
                                        }

                                        // 添加图片路径隐藏域
                                        $(‘#opRegisterForm‘).append(‘<input type="hidden" id="‘ + component.getFilePathHiddenId() + ‘" name="‘ + fileTypeMap.get(value)  + ‘" value="‘ + initData.qualification[value][index] + ‘" />‘);
                                    }
                                });
                            } else if (UPLOAD_FILE_TYPE.OPTIONAL == value) {//  这个是资质信息
                                $.each(optionalUploadFileComponent, function (index, component) {
                                    if(initData.qualification[value][index]) {
                                        component.setImage(‘/yqt-portal-app/app/yqt/merchant/manage/showImage?filePath=‘ + initData.qualification[value][index]);
                                        component.disableUploading();


                                        //$(‘.upload-file-show‘).click(function(){
                                        //    window.open(‘/yqt-portal-app/app/yqt/merchant/manage/showImage?filePath=‘ + initData.qualification[value][index], ‘_blank‘,"scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes,height=600,width=800");
                                        //
                                        //})

                                        var uploadFileObj = component.getUploadFileObj();

                                        if(component.isDownload(initData.qualification[value][index])) {
                                            uploadFileObj.find(‘.upload-img-file‘).click(function () {
                                                window.location.href = contextPath + ‘/app/yqt/op/chain/register/download?fileRelativePath=‘ + initData.qualification[value][index];
                                            })
                                        } else {
                                            uploadFileObj.find(‘.upload-img-file‘).click(function () {
                                                window.open(‘/yqt-portal-app/app/yqt/merchant/manage/showImage?filePath=‘ + initData.qualification[value][index], ‘_blank‘,"scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes,height=600,width=800");
                                            })
                                        }

                                        // 添加图片路径隐藏域
                                        $(‘#opRegisterForm‘).append(‘<input type="hidden" id="‘ + component.getFilePathHiddenId() + ‘" name="‘ + fileTypeMap.get(value) + ‘" value="‘ + initData.qualification[value][index] + ‘" />‘);
                                    }
                                });
                            } else {
                                // 得到对应的hidden的name值
                                //var hidden =  fileTypeMap.get(fileType)
                                var uploadFileComponent = uploadFileComponentMap.get(value);
                                uploadFileComponent.setImage(‘/yqt-portal-app/app/yqt/merchant/manage/showImage?filePath=‘ + initData.qualification[value]);
                                uploadFileComponent.disableUploading();

                                // 添加图片路径隐藏域
                                $(‘#opRegisterForm‘).append(‘<input type="hidden" id="‘ + uploadFileComponent.getFilePathHiddenId() + ‘" name="‘ + fileTypeMap.get(value) + ‘" value="‘ + initData.qualification[value] + ‘" />‘);
                                var uploadFileObj = uploadFileComponent.getUploadFileObj();

                                if(uploadFileComponent.isDownload(initData.qualification[value])) {
                                    uploadFileObj.find(‘.upload-img-file‘).click(function () {
                                        window.location.href = contextPath + ‘/app/yqt/op/chain/register/download?fileRelativePath=‘ + initData.qualification[value];
                                    })
                                } else {
                                    uploadFileObj.find(‘.upload-img-file‘).click(function () {
                                        window.open(‘/yqt-portal-app/app/yqt/merchant/manage/showImage?filePath=‘ + initData.qualification[value], ‘_blank‘, "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes,height=600,width=800");
                                    })
                                }

                            }
                        }

                    });
                }
            }
        }
    })();

    +function () {
        init.initialize();
    }();

    return {
        UPLOAD_FILE_TYPE : UPLOAD_FILE_TYPE,
        validateUploadingFile : validateUploadingFile,
        validateUploadingFileForChain : validateUploadingFileForChain,
        getUploadFileComponentMap : getUploadFileComponentMap
    }
})();


以上的js代码实现了图片的上传，下载，点击换图和点击查看大图（实现方法是打开一个新页面），重点应用了俩个jq插件lrz（用来上传图片）和ajaxuploadfile（上传非图片，具体上传了rar，zip和pdf文件）插件
上传图片涉及的区域比较多，分类复杂，需要根据具体的页面来进行理解，但是具体的逻辑是适用的，包含了初始化，validate插件的校验。写的比较糙，以后来完善

图片和文件上传js剖析

标签：led   nload   按钮   frame   open   content   oca   turn   缩略图   

原文地址：http://www.cnblogs.com/wyliunan/p/7688187.html