• 关于jQuery文件上传


    <tr>
                            <th width="150" class="jcjh1" align="center">事故报告名称</th>
                            <td class="jcjh"><input type="text" name="accident.paperName"
                                id="paperName" value="${accident.paperName}"
                                class="easyui-validatebox" data-options="required:false" /></td>
                            <th width="150" class="jcjh1" align="center">报告文件</th>
                            <td class="jcjh">
                                <div style=" 315px; height: 25px; position: relative;">
                                    <input type="text" id="paperFile" name="accident.paperpath"
                                        class="crs-upload-name easyui-validatebox"
                                        data-options="required:false" value="${accident.paperpath }"
                                        readonly="readonly" style=" 280px; padding-right: 26px;" />
                                    <input type="hidden" id="audioFilePath" name="" value=""
                                        class="crs-upload-path" /> <span id="paperUploader"
                                        class="crs-ile-uploader" style="position: absolute;"
                                        title="上传文件"></span>
                                </div>
                            </td>
                        </tr>
    var $planSelDlg;
        $(function() {
            if ('${accident}') {
                $("select[name='accident.acc_area']").val('${accident.acc_area}');
                $("select[name='accident.eco_type']").val('${accident.eco_type}');
                $("select[name='accident.col_company']").val('${accident.col_company}');
                $("select[name='accident.acc_type']").val('${accident.acc_type}');
                $("select[name='accident.acc_level']").val('${accident.acc_level}');
            }
            $planSelDlg = $("#planSelDialog");
    
            $planSelDlg.dialog({
                title : "选择监察方案",
                width : 900,
                height : 400,
                closed : true,
                modal : true,
                draggable : false,
                buttons : "#planSelDialogButtons"
            });
    //加载文件预览效果 $(
    "#paperUploader").kyuploadify({ width : 24, height : 23, formData : { "pair.fileType" : "paper", "pair.ajax" : true }, fileTypeDesc : "文书文件", fileTypeExts : "*.*", onUploadSuccess : function(file, data) { $.crs.result(data, function(ret) { $("#paperFile").val(ret.attributes["path"]).focus(); }); }, onUploadError : function(file) { } }); if ("${accident}") { } });

    引入的js文件

    <link href="pages/doc/as/styles/css/blue.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="styles/common/css/bootstrap.min.css" type="text/css" />
    <link href="styles/common/css/blue.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="resources/scripts/frameworks/jquery.easyui.1.3.2/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="scripts/frameworks/jquery.ui.autocomplete.1.11.4/jquery-ui.min.css" />
    <link href="resources/scripts/jquery.crs/uploadify.css" type="text/css" rel="stylesheet"></link>
    <script type="text/javascript"src="scripts/frameworks/jquery.ui.autocomplete.1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript"src="resources/scripts/frameworks/jquery.uploadify.3.2.1/jquery.uploadify.min.js"></script>
    <script type="text/javascript"src="resources/scripts/jquery.crs/jquery.crs.kyuploadify.js"></script>
    //文件加载器见上标红处处理
    <script type="text/javascript" src="pages/doc/as/scripts/jquery.crs/jquery.crs.kyform.js"></script>

    style

    <style>
    * {
        margin: 0;
        padding: 0;
    }
    
    li {
        list-style: none;
    }
    
    .nav_new {
        float: left;
        position: relative;
        left: -20px;
        top: 10px;
    }
    
    #name {
        float: left;
    }
    
    #dic_data {
        position: absolute;
        left: 0;
        top: 30px;
        float: left;
        display: block;
        width: 210px;
    }
    
    #dic_data li {
        display: block;
        background: #ccc;
        height: 27px;
        line-height: 27px;
        cursor: pointer;
        text-align: center;
    }
    
    #dic_data li:hover {
        background: gray;
    }
    
    html {
        padding: 0px;
        margin: 0;
    }
    
    .uploadify {
        top: 3px;
        right: 0px;
        position: absolute;
    }
    
    .uploadify-button {
        border: 0px;
        border-radius: 0px;
        background: url(resources/styles/images/folder.png) no-repeat;
    }
    
    .uploadify:hover .uploadify-button {
        background: url(resources/styles/images/folder.png) no-repeat;
    }
    
    .validatebox-invalid {
        background-position: left center;
    }
    </style>

    地区与监管机构的联动设置

    function onAreaChange() {
            var area = $('#acc_area').val();
            if (area == '长春' || area == '四平' || area == '辽源' || area == '白城') {
                $("select[name='accident.col_company']").val('辽源分局')
            } else if (area == '通化' || area == '白山') {
                $("select[name='accident.col_company']").val('白山分局')
            } else if (area == '延边') {
                $("select[name='accident.col_company']").val('延边分局')
            } else if (area == '吉林') {
                $("select[name='accident.col_company']").val('吉林站')
            }
        }

    html

     <th>所属地市</th>
     <td>
       <select id="acc_area" class="crs_ep_addipt" onchange="onAreaChange()" name="accident.acc_area" style=" 216px; height: 33px">
          <s:iterator value="datas['地市']" var="area">
             <option value="${dicName }">${dicName }</option>
          </s:iterator>
        </select>
     </td>
     <th>所属单位</th>
     <td>
           <select class="crs_ep_addipt" name="accident.col_company" style=" 216px; height: 33px">
                <s:iterator value="datas['局']" var="area">
                    <option value="${dicName }">${dicName }</option>
                </s:iterator>
          </select>
     </td>
  • 相关阅读:
    SQL联合查询(内联、左联、右联、全联)的语法
    java动态代理(JDK和cglib)详解
    javascript通过className取得dom集合
    hibernate的各种保存方式的区别 (save,persist,update,saveOrUpdte,merge,flush,lock)等
    Quartz的cron表达式
    DDL语言详解
    键、索引、约束及其区别 理解
    存储过程详解
    求ios开发流程及学习方法
    java接口详解以及与抽象类区别
  • 原文地址:https://www.cnblogs.com/flytogalaxy/p/7595086.html
Copyright © 2020-2023  润新知