zoukankan      html  css  js  c++  java
  • 关于JS获取标签中的的方法及上传下载

    <tr>
                   <th   class="jcjh1"  >
                   <input id="selectradio" type="radio" name="rec" value="0" onclick="showSelectSpot()" checked="checked">选择
                <input id="textradio"   type="radio" name="rec" value="1" onclick="showTextSpot()">输入
                   地点名称
                   </th>
                   <td  id="jcddselect">
                      <input type="hidden" id="spotName1"  name="danger.spotName"  value="${danger.spotName}"/>
                      <select id="spotSelect" onchange="showdynamicSpot()">
                               <option value="">请选择</option>
                               <s:iterator value="spots" var = "item"> 
                                <option value="<s:property value="#item.jcddmc"/>">
                                       <s:property value="#item.jcddmc"/>
                                </option>
                               </s:iterator> 
                      </select>
                </td>
                 <td id="jcddtext" class="jcjh"  style="display: none;">
                    <input type="text" id="spotName2"  name="danger.spotName"  value="${danger.spotName}"/>
                </td>
                <th   class="jcjh1"  >动态地点</th>
                  <td>
                       <input id="dynamicSpot" type="text" class="search_ipt easyui-validatebox " value="${danger.dynamicSpot }" name="danger.dynamicSpot" data-options="required:true"/> 
                </td>
            </tr>

    使用JQuer的Id选择器:

    function showSelectSpot(){
            $("#jcddtext").css('display','none');
            $("#jcddselect").css('display','block');
        }
    function showTextSpot(){
            $("#jcddtext").css('display','block');
            $("#jcddselect").css('display','none');
        }
    if("${spots}"!=null && "${spots}"=="[]"){
    //根据参数的状态对input标签进行显示设置 JQuery类型选择器 $(
    "input[type='radio'][value='0']").attr("disabled",true); $("input[type='radio'][value='0']").attr("checked",false); $("input[type='radio'][value='1']").attr("checked",true); showTextSpot(); } if("${danger.spotName}"){ getSpotName("${danger.spotName}"); }
    
    
    
     

    关于附件的下载:

    1.

                  <tr>
                    <th class="jcjh1">复查附件:</th>
                    <td data-name="${danger.recheckFileNum}" data-file="${danger.recheckFilePath}"
                        onclick="downFile(this)"  style="color:rgb(27, 192, 244);cursor:pointer;">
                          ${danger.recheckFileNum }
                    </td>
                  </tr>
    function downFile(tag){
               var path = null;
               var filename=null;
              if($("#audioFilePath").val!=null){
                  filename =$(tag).data("name");
                  path=$(tag).data("file");
               } 
              if(path == ""){
                   $.messager.alert('系统提示', '文件路径不存在 ', 'info');
                   return;
               }
               $("#downloadfile").val(path);
               $("#downloadname").val(filename);
               $("#downfrm").submit();   
        }
    <script type="text/javascript" src="<%=basePath %>/resources/scripts/frameworks/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="<%=basePath %>/resources/scripts/jquery.crs/jquery.crs.utils.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/resources/styles/crs-default.css"  />
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/resources/scripts/frameworks/jquery.easyui.1.3.2/themes/icon.css"  />
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/resources/scripts/frameworks/jquery.easyui.1.3.2/themes/default/easyui.css"/>
    <script type="text/javascript" src="<%=basePath %>/resources/scripts/frameworks/jquery.easyui.1.3.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="<%=basePath %>/resources/scripts/jquery.crs/jquery.easyui.validaterules.js"></script>
    <script type="text/javascript" src="<%=basePath %>/resources/scripts/frameworks/jquery.easyui.1.3.2/locale/easyui-lang-zh_CN.js"></script>

    2.

                   <tr>
                      <th  width="20%" class="jcjh1"  align="center">复查附件</th>
                       <td class="jcjh">
                           <div style="315px;height:25px; position: relative;display:inline-block;" >
                            <input type="text" id="paperFile" name="danger.recheckFileNum" value="" readonly="readonly" class="crs-upload-name easyui-validatebox" 
                             
                                 style=" 290px;padding-right: 26px; height:23px" />
                            <input type="hidden" id="audioFilePath" name="danger.recheckFilePath" value="${danger.recheckFilePath}" class="crs-upload-path"/>
                            <span id="paperUploader"  class="crs-ile-uploader" style="position: absolute;" title="上传文件"></span>
                        </div>
    //下载 <input id="downloadBtn" type="button" onclick="downFile()" class="crs-ep-down" style="position:relative;left:12px;padding-left: 70px;top: -3px;" /> </td> </tr>
    /* 下载复查附件 */
        function downFile(){
               var path = null;
               var filename=null;
              if($("#audioFilePath").val!=null){
                  path = $("#audioFilePath").val();
                  filename=$("#paperFile").val();
               } 
              if(path == "" ||path == null){
                   $.messager.alert('系统提示', '文件路径不存在 ', 'info');
                   return;
               }
               $("#downloadfile").val(path);
               $("#downloadname").val(filename);
            $("#downfrm").submit();   
        }

    地址验证可以使用如下方法验证:

      if(!path){
                 $.messager.alert('系统提示', '文件路径不存在 ', 'info');
                 return;
               }

    上传

    $("#paperUploader").kyuploadify({
                30,
                height:23,
                formData:{"pair.clsid":"danger","pair.ajax":true},
                fileTypeDesc:"复查附件",
                fileTypeExts: '*.doc;*.docx;*.xls;*.xlsx;*.pdf',
                onUploadSuccess:function(file,data){
                    $.crs.result(data,function(ret){
                        $("#paperFile").val(file.name);
                        $("#audioFilePath").val(ret.attributes["path"]);
                       },function(){
                           $.messager.alert("系统消息","上传文件失败!","error");
                       })
                },
                onUploadError:function(file){
                    
                }
            });
    <form id="downfrm" action="file!download.action" method="post">
        <input id="downloadname" type="hidden" name="pair.filename"/>
        <input id="downloadfile" type="hidden" name="pair.path" />
    </form>
    <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 href="styles/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 href="resources/scripts/jquery.crs/uploadify.css" type="text/css" rel="stylesheet"></link>
    <script type="text/javascript" src="scripts/jquery.crs/jquery.crs.kyform.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>
  • 相关阅读:
    学了这些,你就算入门DIV+CSS了(转)
    【转】Web service是什么?
    [转]MongoDB插入和查询操作
    【转】安装m2e最佳方案
    XDS框架基本事务及其Soap消息实例
    数据表改变之后数据的迁移
    HL7 PID (Patient Identification) Segment(HL7规定的PID字段)
    海量数据库的设计
    【转】基于Axis2开发WebService
    【转】JAVA 调用Web Service的方法
  • 原文地址:https://www.cnblogs.com/flytogalaxy/p/7889686.html
Copyright © 2011-2022 走看看