您的位置:首页 > Web前端 > JavaScript

上传 js (部分代码)

2015-12-29 11:51 591 查看
<div class="pop-panel" id="image_data_pop">

            <div class="panel-top">添加文件</div>

            <div class="pop-content">

                <div class="pop-file-content">

                    <form id="imageForm" action="${ctx }/acc/media/importImageData" method="post" enctype="multipart/form-data">

                        <p>

                            <span><input type="file" style="width: 250px;" id="imageFile" name="files"/></span>

                            <span class="tip-loadings">等待上传</span>

                        </p>

                        <p>

                            <span style="color: #FF0000;font-size: 12px;">

                                 1.上传文件支持格式支持以下方式:

                            </span>

                            <input type="hidden" name="recordId" id="hid_recordId"/> <!-- 关联主表的编号 -->

                            <input type="hidden" name="showOrder" id="hid_showOrder"/> <!-- 排序号 -->

                            <input type="hidden" name="type" value="project"/> <!-- 操作类型 -->

                            <input type="hidden" name="dateAttachmentBusiType" id="hid_dateAttachmentBusiType"/> <!-- 类型-->

                            <input type="hidden" name="dateAttachmentDataId" id="hid_dateAttachmentDataId"/> <!-- 影像资料数据ID -->

                            <input type="hidden" name="dateAttachmentCode" id="hid_dateAttachmentCode"/> <!-- 影像资料编码 -->

                        </p>

                        <p>

                            <span style="color: #FF0000;font-size: 12px;">    png;jpeg;jpg;bmp;gif;rar;zip;xls;xlsx;doc;docx;ppt;pptx;txt;pdf</span>

                        </p>

                        <p>

                            <span style="color: #FF0000;font-size: 12px;"> 2.若要上传其他格式的请打成压缩包进行上传</span>

                        </p>

                    </form>

                </div>

                <div class="pop-btn-group">

                    <input class="btn btn-primary" onclick="startUploadImageFile();" type="button" value="上传"/>

                    <input class="btn" type="button" value="关 闭" onclick="closePop();"/>

                </div>

            </div>
            </div>

function initImageDataView(){

    var projectId = $('#com_hide_projectId').val(); //

    var html = '';

    $.get(ctx+"/acc/media/getImageDataList?projectId="+projectId,function(res){

        var mainLesseUser = res.mainLesseUser;//主承租人信息

        var comLesseList = res.comLesseList; //共同承租人信息

        var naturalList = res.naturalList; //自然人影像资料类型

        var legalList = res.legalList; //法人影像资料类型

        var mediaInfoList = res.mediaInfoList;

        var imagePath;

        //主承租人信息

        if(!isNulled(mainLesseUser)){ //主承租人

            html += '<div class="img-data-title">主承租人影像资料    :<font color="#FF0000">'+mainLesseUser.customerName+'</font></div>';

            html += '<div>';

            if(mainLesseUser.customerType == "1"){ //自然人

                $.each(naturalList,function(index,item){

                    html += '<p class="img-p" imgage-type="'+ res.naturaType +'" name="'+item.code+'" data-id="'+mainLesseUser.id+'">'+item.typeName+'<a style="float:right;margin-right:10px;" onclick="uploadImgData(event,this)">上传</a></p>';

                    var temp_html = '';

                    $.each(mediaInfoList,function(index,it){

                        if(it.dateAttachmentBusiType == res.naturaType && it.dateAttachmentCode == item.code){

                            if(it.isOtherData == "yes" && it.dateAttachmentDataId == mainLesseUser.customerId){

                                imagePath = res.nimgPath+mainLesseUser.customerId+"/"+it.dateAttachmentName;

                                temp_html += createImgHtml(it.dateAttachmentName,it.id,imagePath,false);

                            }else if(it.dateAttachmentDataId == mainLesseUser.id){

                                imagePath = res.pimgPath+projectId+"/"+it.dateAttachmentName;

                                temp_html += createImgHtml(it.dateAttachmentName,it.id,imagePath,true);

                            }

                        }

                    });

                    if(temp_html != ''){

                        html += '<div class="img-show" style="display:block;">';

                    }else{

                        html += '<div class="img-show">';

                    }

                    html += temp_html;

                    html += '</div>';

                });

            }else{

                $.each(legalList,function(index,item){

                    html += '<p class="img-p" imgage-type="'+ res.legalType +'" name="'+item.code+'" data-id="'+mainLesseUser.id+'">'+item.typeName+'<a style="float:right;margin-right:10px;" onclick="uploadImgData(event,this)">上传</a></p>';

                    var temp_html = '';

                    $.each(mediaInfoList,function(index,it){

                        if(it.dateAttachmentBusiType == res.legalType && it.dateAttachmentCode == item.code && it.dateAttachmentDataId == mainLesseUser.id){

                            if(it.isOtherData == "yes" && it.dateAttachmentDataId == item.customerId){

                                imagePath = res.limgPath+mainLesseUser.customerId+"/"+it.dateAttachmentName;

                                temp_html += createImgHtml(it.dateAttachmentName,it.id,imagePath,false);

                            }else if(it.dateAttachmentDataId == mainLesseUser.id){

                                imagePath = res.pimgPath+projectId+"/"+it.dateAttachmentName;

                                temp_html += createImgHtml(it.dateAttachmentName,it.id,imagePath,true);

                            }

                        }

                    });

                    if(temp_html != ''){

                        html += '<div class="img-show" style="display:block;">';

                    }else{

                        html += '<div class="img-show">';

                    }

                    html += temp_html;

                    html += '</div>';

                });

            }

            html += '</div>';

        }

        //共同承租人信息

        if(comLesseList.length > 0){ //共同承租人

            $.each(comLesseList,function(index,item){

                html += '<div class="img-data-title">共同承租人影像资料:<font color="#FF0000">'+item.customerName+'</font></div>';

                html += '<div>';

                if(item.customerType == "1"){

                    $.each(naturalList,function(index,itm){

                        html += '<p class="img-p" imgage-type="'+res.naturaType+'" name="'+itm.code+'" data-id="'+item.id+'">'+itm.typeName+'<a style="float:right;margin-right:10px;" onclick="uploadImgData(event,this)">上传</a></p>';

                        var temp_html = '';

                        $.each(mediaInfoList,function(index,it){

                            if(it.dateAttachmentBusiType == res.naturaType && it.dateAttachmentCode == itm.code){

                                if(it.isOtherData == "yes" && it.dateAttachmentDataId == item.customerId){

                                    imagePath = res.nimgPath+item.customerId+"/"+it.dateAttachmentName;

                                    temp_html += createImgHtml(it.dateAttachmentName,it.id,imagePath,false);

                                }else if(it.dateAttachmentDataId == item.id){

  
c6d5
                                 imagePath = res.pimgPath+projectId+"/"+it.dateAttachmentName;

                                    temp_html += createImgHtml(it.dateAttachmentName,it.id,imagePath,true);

                                }

                            }

                        });

                        if(temp_html != ''){

                            html += '<div class="img-show" style="display:block;">';

                        }else{

                            html += '<div class="img-show">';

                        }

                        html += temp_html;

                        html += '</div>';

                    });

                }else{

                    $.each(legalList,function(index,itx){

                        html += '<p class="img-p" imgage-type="'+res.legalType+'" name="'+itx.code+'" data-id="'+item.id+'">'+itx.typeName+'<a style="float:right;margin-right:10px;" onclick="uploadImgData(event,this)">上传</a></p>';

                        var temp_html = '';

                        $.each(mediaInfoList,function(index,it){

                            if(it.dateAttachmentBusiType == res.projectType && it.dateAttachmentCode == itx.code){

                                if(it.isOtherData == "yes" && it.dateAttachmentDataId == item.customerId){

                                    imagePath = res.limgPath+item.customerId+"/"+it.dateAttachmentName;

                                    temp_html += createImgHtml(it.dateAttachmentName,it.id,imagePath,false);

                                }else if(it.dateAttachmentDataId == item.id){

                                    imagePath = res.pimgPath+projectId+"/"+it.dateAttachmentName;

                                    temp_html += createImgHtml(it.dateAttachmentName,it.id,imagePath,true);

                                }

                            }

                        });

                        if(temp_html != ''){

                            html += '<div class="img-show" style="display:block;">';

                        }else{

                            html += '<div class="img-show">';

                        }

                        html += temp_html;

                        html += '</div>';

                    });

                }

                html += '</div>';

            });

        }

       

var $uploadDom; //

function uploadImgData(e,obj){

    e.stopPropagation(); //停止事件冒泡

    $uploadDom = $(obj).parent();

    addAttachmented('image_data_pop'); //弹出文件上传弹出层

    var code = $uploadDom.attr('name'); //文件类型编码

    var projectId = $('#com_hide_projectId').val();//项目ID

    var dataId = $uploadDom.attr('data-id'); //数据ID

    var type = $uploadDom.attr('imgage-type'); //数据ID

    var order = $uploadDom.next().find('img').length;

    

    $('#hid_dateAttachmentBusiType').val(type);

    $('#hid_showOrder').val(order+1);

    $('#hid_recordId').val(projectId);

    $('#hid_dateAttachmentDataId').val(dataId);

    $('#hid_dateAttachmentCode').val(code);

}

function startUploadImageFile(){

    var fileTypes = "png;jpeg;jpg;bmp;gif;rar;zip;xls;xlsx;doc;docx;ppt;pptx;txt;pdf";

    var fileName = $('#imageFile').val();

    if(fileName == ''){

        $('#imageForm .tip-loadings').css({'color':'#FF0000'}).html('文件不能为空!');

        return;

    }

    var fileType = fileName.substring(fileName.lastIndexOf(".")+1,fileName.length);

    if(fileTypes.indexOf(fileType) == -1){

        $('#imageForm .tip-loadings').css({'color':'#FF0000'}).html('文件格式错误!');

        return;

    }

    $('#imageForm .tip-loadings').css({'color':'#FF0000'}).html('上传中,请稍后...');

    $('#imageForm').ajaxSubmit({

        dataType : 'json',

        success:function(res){ //提交成功的回调函数  

            if(res.result == 'isExist'){

                $('#imageForm .tip-loadings').css({'color':'#FF0000'}).html('文件已经存在');

            }else if(res.result == 'success'){

                $uploadDom.next().append(createImgHtml(fileName,res.imageId,res.imgPath,true));

                $uploadDom.next().slideDown();

                closePop();

                $.jBox.tip('上传成功!','success');

            }else{

                $('#imageForm .tip-loadings').css({'color':'#FF0000'}).html('上传失败');

            }

        }

    });

}

function showBigImg(obj){

    var p = {

        scrollTop : $(document).scrollTop(),  //滚动条距离顶端距离

          windowWidth : $(window).width(), //可视区域宽度

          windowHeight : $(window).height(), //可视区域高度

          bheight : $(document.body).height(), //取body的高度作为遮罩层的高度

    }

    $('.lask').css({'height':p.windowWidth+'px','display':'block'})//显示遮罩层的样式

//    var html = "<div>";

//    html += "<img class='big-img' id='imgshow' src='" + $(obj).attr('src') + "' />";

//    html += '</div>';

    $("<img class='big-img' id='imgshow' src='" + $(obj).attr('src') + "' />").appendTo("body");

    

    var real_width  =  $('#imgshow').width(), real_height =  $('#imgshow').height(); //图片真实高度//图片真实宽度

    var percent = real_width/real_height; //图片比例

    //保证图片的高度不能超过可视区域的高度,上下保留20PX,保证宽度在屏幕中央

    //保证图片宽高比例不变

    var last_height = 0,last_width = 0;

    if(real_height <= (p.windowHeight-20*2)){ //真实高度低于屏幕可视高度,则用图片高度则为最终高度

        last_height = real_height;

        last_width = real_width;

    }else{

        last_height = p.windowHeight - 20*2;

        last_width = last_height*percent;

    }

    var top = (p.windowHeight - last_height)/2+p.scrollTop;

    var left = (p.windowWidth - last_width)/2;

    

    var o_top = $(obj).offset().top;

    var o_left = $(obj).offset().left;

    var o_width = $(obj).width();

    var o_height = $(obj).height();

    $("#imgshow").css({"top": o_top,"left": o_left,"height":o_height,"width":o_width,"display":"block"});

    $("#imgshow").animate({"top": top,"left": left,"height":last_height,"width":last_width}).click(function(){

        jQuery('.lask').fadeOut('fast');

        jQuery(this).animate({"top": o_top,"left": o_left,"height":o_height,"width":o_width,"display":"block"},

            function(){

                jQuery('#imgshow').remove();

            }

        );

    });

}

function delImageData(obj,imageId,path){

    $.jBox.confirm("确定删除该图片资料吗?", "提示", function(v,h,f){

        if(v==true){

            $(obj).parent().append('<p class="imgage-loading">删除中...</p>');

            $.post(ctx+'/acc/media/delImgDataById',{'imageId':imageId,'path':path},function(data){

                if(data == 'success'){

                    $.jBox.tip('删除成功!','success');

                    $(obj).parent().remove();

                }else{

                    $.jBox.tip('删除失败!','warning');

                    $(obj).parent().find('p').remove();

                }

            },'text');

        }

    }, { buttons: { '确定': true, '取消': false } });

}

function delSysImg(obj,imageId){

    $.jBox.confirm("确定删除该资料吗?", "提示", function(v,h,f){

        if(v==true){

            $.post(ctx+'/acc/media/delImgDataById',{'imageId':imageId},function(data){

                if(data == 'success'){

                    $.jBox.tip('删除成功!','success');

                    $(obj).parent().parent().remove();

                }else{

                    $.jBox.tip('删除失败!','warning');

                }

            },'text');

        }

    }, { buttons: { '确定': true, '取消': false } });

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: