JavaScript部分:未用jQuery前写的代码,现学现卖。
【版本1:原生·错误太多】

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>物流信息项目发布</title>
{include file="common/header"}
  <tr>
    <td height="17"><a href="">主页</a> &raquo; 物流项目信息发布</td>
  </tr>
</table>
<table width="778" border="0" cellpadding="0" cellspacing="0" class="main">
<tr valign="top">
  <td align="center" class="maincontent">&nbsp;</td>
</tr>
<tr valign="top">
<td align="center" class="maincontent">
  <form enctype="multipart/form-data" method="POST" onsubmit="return false;" name="form1" id="myForm">
        <table width="96%" border="0" cellpadding="0" cellspacing="2" class="inputTable">
          <tr> 
            <td class="inputTitle">新需求发布</td>
          </tr>
          <tr> 
            <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr> 
                  <td width="6%" class="inputHeader">标题</td>
                  <td colspan="5" class="inputContent"><input name="title" notNull="标题" type="text" class="text width100 notNull"> 
                  </td>
                </tr>
                <tr> 
                  <td width="6%" nowrap class="inputHeader">区域</td>
                  <td width="16%">
                    <select name="area" class="notNull" notNull="区域">
                      <option value="">请选择区域</option>
                      <option>东北</option>
                      <option>西北</option>
                      <option>北方</option>
                      <option>西南</option>
                      <option>南方</option>
                      <option>华东</option>
                      <option>华中</option>
                    </select> </td>
                  <td width="7%" nowrap class="inputHeader">行业</td>
                  <td width="13%">
                    <select name="prof" class="notNull" notNull="行业">
                     <option value="">请选择行业</option>
                      <option>制造</option>
                      <option>能源</option>
                      <option>运输</option> 
                      <option>工程</option> 
                      <option>食品 
                    </select> 
                  </td>
                </tr>
                <tr> 
                  <td colspan="6" class="inputContent">&nbsp; </td>
                </tr>
                <tr> 
                  <td colspan="6" class="inputContent"> 文字信息 </td>
                </tr>
                <tr> 
                  <td colspan="6" class="inputContent"><textarea name="info" cols="60" rows="5]" class="text width100 notNull" notNull="文字信息"></textarea> 
                  </td>
                </tr>
              </table>
              <p> 
              <table width="100%" height="138" border="0" cellpadding="2" cellspacing="1" class="midTable1">
                <tr class="midTable1td1"> 
                  <td width="24%" height="33" align="center">图片描述</td>
                  <td width="46%" align="center">图片</td>
                  <td width="30%" align="center">操作</td>
                </tr>
                <tr class="midTable1td1"> 
                  <td height="52"  class="inputContent" >西门子 </td>
                  <td width="46%" align="center"> <img src="__STATIC__/admin/graphics/p_siemens.gif"> 
                  </td>
                  <td width="30%" align="right"> <input type="button" name="Submit2" value="修改描述信息" class="button"> 
                    <input type="button" name="Submit2" value="删 除" class="button"></td>
                </tr>
                <tr class="midTable1td1"> 
                  <td height="49" class="inputContent">IBM</td>
                  <td width="46%" align="center"> <a href="#"><img src="__STATIC__/admin/graphics/p_ibm.gif" width="92" height="35" border="0"></a> 
                  </td>
                  <td width="30%" align="right"><input type="button" name="Submit" value="修改描述信息" class="button"> 
                    <input type="button" name="Submit" value="删 除" class="button"></td>
                </tr>
                <tr> 
                  <td colspan="3"> <input type="button" name="Submit" value="上 传" class="button"> 
                  </td>
                </tr>
              </table>
              <p> 
                <!-- 附件上传 -->
              <table width="100%" height="138" border="0" cellpadding="2" cellspacing="1" class="midTable1" id="filelist">
                <tr class="midTable1td1"> 
                  <td width="10%" align="center">附 件</td>
                  <td width="10%" align="center">操 作</td>
                </tr>
                <!-- 上传按钮 -->
                 <td colspan="3"> <input type="button" name="Submit9" id="addfile" value="上 传" class="button"> 
                </td>
                <!-- 上传按钮 -->
                <!-- 附件列表 -->
                
                <!-- 附件列表 -->
              </table>
              <!-- 附件上传 -->
          </tr>
          <tr> 
            <td align="right"><input type="button" id="adsv1"   value="保 存" class="button">
            <input id="adsv2" type="button"     value="发 布" class=button>
            <input  type="button"   value="删 除" class=button></td>                      
          </tr>
  </form>  
</td>
</tr>
<tr valign="top">
  <td align="center" class="maincontent">&nbsp;</td>
</tr>
</table>
<!-- #BeginLibraryItem "/Library/footer.lbi" -->
{include file="common/footer"}
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td class="footerLine"><img src="__STATIC__/admin/graphics/space.gif" width="1" height="1"></td>
    </tr>
</table></td></tr>
</table>
<!-- #EndLibraryItem --></body>
</html>
<iframe  width=100 height=0></iframe>




<!-- 6.17. 需求发布页面逻辑核心代码 -->
<script>
  $(function(){
    //循环计数限制最大文件上传数量
    // 添加文件上传标签
    //上传的5个文件:下标0-4 选择文件、删除文件id为 file0\filedel0--file4\filedel4
    $("#addfile").click(function(){

      if($(".midTable1td2").length<5)
      {
        $("<tr class=\"midTable1td2\"> <td height=\"52\"  class=\"inputContent\" ><div align=\"center\"><input name=\"Submit11[]\" type=\"file\"></div></td><td width=\"23%\" align=\"right\"> <input type=\"button\" name=\"Submit22\" value=\"删 除\" class=\"del_button\"></td></tr>").appendTo($("#filelist"));
            
      }else{
        alert("【最多只允许上传5个附件】");
      }
      //注意:将n值的自增放在这里错误的,因为每次点击上传都会自增n的值
      //判断是否超过5个即未进行删除前的n值
      //n++;        
     
      
      //删除附件实现
      // if(n<=5)
      // {
      //   //存在bug?第一个this获取的是5个,再点击变成4个,3,2,1》??
      //   $("input[name='Submit22']").each(function(){
      //     $(this).click(function(){
      //       $(this).parent().parent().remove();
      //       n--;
      //       console.log(n);
      //     })
      //   })
      // }
      // //附件上传大小限制
      // if(n<=5)
      // {
      //    $("input[type='file']").click(function(){
      //     $(this).change(function(){
      //        console.log($(this)[0].files);
      //        console.log($(this)[0].size);
      //       if($(this)[0].files.size>10000)
      //         alert("【文件大小最大1M】");
      //     })
           
      //    })
      // }

      
    })
    // 删除标签
    $("body").on('click',"input[name='Submit22']",function(){
        $(this).parent().parent().remove();
    })
    $("body").on('change',"input[name='Submit11[]']",function(){
        var name = $(this)[0].files[0].name;
        var size = $(this)[0].files[0].size;
        var index = name.lastIndexOf(".");
        var suffix = name.substr(index+1);
        // var xx = ['jpg','png','webm','jpeg','gif']
        // if(!xx.includes(suffix.toLocaleLowerCase())){
        //     alert("后缀名错误")           
        // }
        // if(size > 10000){
        //   alert("文件过大")
        // }
        //  $(this).val('')

    })
    
    //核验信息

      //保存按钮
      $("#adsv1").click(function(){
        //jQuery实现each遍历:
        // var num1 = 0;
        //   $(".notNull").each(function(){
        //     var name = $(this).attr("name");
        //     if($(this).val() == ""){
        //       alert($(this).attr('notNull')+"不能为空");return false;
        //     }else
        //       num1++;
        //   })
        //   if(num1 ==4){
        //       var formData = $("#myForm").serialize();
        //       $.ajax({
        //         type:"post",
        //         url:"{:url('index/publish')}",
        //         data:formData,
        //         success:function(data){
        //           console.log(data);
        //         }
        //       })
        
        var formData = new FormData($("#myForm")[0]);
        // var formData = decodeURIComponent(formData);
        // console.log(formData);
        // $("input[name='Submit11[]").each(function(i,e){
        //   // console.log(i)
        //   // console.log(e)
        //   //  console.log( )
        //    formData.append("Submit11[]", $(this)[0].files[0]);
        // })
        // console.log(formData)
          //var formData = $("#myForm").serialize();
              $.ajax({
                type:"post",
                url:"{:url('index/save')}",
                data:{formData},
                processData: false,
                contentType: false,
                success:function(data){
                  console.log(data);
                }
              })
      })
      //
      $("#adsv2").click(function(){
          var formData = new FormData($("#myForm")[0]);
          
          // $(".notNull").each(function(){
          //   var name = $(this).attr("name");
          //   if($(this).val() == ""){
          //     alert($(this).attr('notNull')+"不能为空");return false;
          //   }else
          //     num2++;
          // })
          // console.log(num2);
          // if(num2 === 4){
          //     var formData = $("#myForm").serialize();
              $.ajax({
                type:"post",
                url:"{:url('index/publish')}",
                data:{formData},
                processData: false,
                contentType: false,
                success:function(data){
                  console.log(data);
                }
              })
      })

    })
    //核验信息结束

</script>

【版本2:原生·错误依旧很多】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>物流信息项目发布</title>
{include file="common/header"}
  <tr>
    <td height="17"><a href="">主页</a> &raquo; 物流项目信息发布</td>
  </tr>
</table>
<table width="778" border="0" cellpadding="0" cellspacing="0" class="main">
<tr valign="top">
  <td align="center" class="maincontent">&nbsp;</td>
</tr>
<tr valign="top">
<td align="center" class="maincontent">
  <form enctype="multipart/form-data" name="form1" id="myForm">
        <table width="96%" border="0" cellpadding="0" cellspacing="2" class="inputTable">
          <tr> 
            <td class="inputTitle">新需求发布</td>
          </tr>
          <tr> 
            <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr> 
                  <td width="6%" class="inputHeader">标题</td>
                  <td colspan="5" class="inputContent"><input name="title" notNull="标题" type="text" class="text width100 notNull"> 
                  </td>
                </tr>
                <tr> 
                  <td width="6%" nowrap class="inputHeader">区域</td>
                  <td width="16%">
                    <select name="area" class="notNull" notNull="区域">
                      <option value="">请选择区域</option>
                      <option>东北</option>
                      <option>西北</option>
                      <option>北方</option>
                      <option>西南</option>
                      <option>南方</option>
                      <option>华东</option>
                      <option>华中</option>
                    </select> </td>
                  <td width="7%" nowrap class="inputHeader">行业</td>
                  <td width="13%">
                    <select name="prof" class="notNull" notNull="行业">
                     <option value="">请选择行业</option>
                      <option>制造</option>
                      <option>能源</option>
                      <option>运输</option> 
                      <option>工程</option> 
                      <option>食品 
                    </select> 
                  </td>
                </tr>
                <tr> 
                  <td colspan="6" class="inputContent">&nbsp; </td>
                </tr>
                <tr> 
                  <td colspan="6" class="inputContent"> 文字信息 </td>
                </tr>
                <tr> 
                  <td colspan="6" class="inputContent"><textarea name="info" cols="60" rows="5]" class="text width100 notNull" notNull="文字信息"></textarea> 
                  </td>
                </tr>
              </table>
              <p> 
              <table width="100%" height="138" border="0" cellpadding="2" cellspacing="1" class="midTable1">
                <tr class="midTable1td1"> 
                  <td width="24%" height="33" align="center">图片描述</td>
                  <td width="46%" align="center">图片</td>
                  <td width="30%" align="center">操作</td>
                </tr>
                <tr class="midTable1td2"> 
                  <td height="52"  class="inputContent" >西门子 </td>
                  <td width="46%" align="center"> <img src="__STATIC__/admin/graphics/p_siemens.gif"> 
                  </td>
                  <td width="30%" align="right"> <input type="button" name="Submit2" value="修改描述信息" class="button"> 
                    <input type="button" name="Submit2" value="删 除" class="button"></td>
                </tr>
                <tr class="midTable1td2"> 
                  <td height="49" class="inputContent">IBM</td>
                  <td width="46%" align="center"> <a href="#"><img src="__STATIC__/admin/graphics/p_ibm.gif" width="92" height="35" border="0"></a> 
                  </td>
                  <td width="30%" align="right"><input type="button" name="Submit" value="修改描述信息" class="button"> 
                    <input type="button" name="Submit" value="删 除" class="button"></td>
                </tr>
                <tr> 
                  <td colspan="3"> <input type="button" name="Submit" value="上 传" class="button"> 
                  </td>
                </tr>
              </table>
              <p> 
                <!-- 附件上传 -->
              <table width="100%" height="138" border="0" cellpadding="2" cellspacing="1" class="midTable1" id="filelist">
                <tr class="midTable1td1"> 
                  <td width="10%" align="center">附 件</td>
                  <td width="10%" align="center">操 作</td>
                </tr>
                <!-- 上传按钮 -->
                 <td colspan="3"> <input type="button" name="Submit9" id="addfile" value="上 传" class="button"> 
                </td>
                <!-- 上传按钮 -->
                <!-- 附件列表 -->
                
                <!-- 附件列表 -->
              </table>
              <!-- 附件上传 -->
          </tr>
          <tr> 
            <td align="right"><input type="button" id="adsv1"   value="保 存" class="button">
            <input id="adsv2" type="button"     value="发 布" class=button>
            <input  type="button"   value="删 除" class=button></td>                      
          </tr>
  </form>  
</td>
</tr>
<tr valign="top">
  <td align="center" class="maincontent">&nbsp;</td>
</tr>
</table>
<!-- #BeginLibraryItem "/Library/footer.lbi" -->
{include file="common/footer"}
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td class="footerLine"><img src="__STATIC__/admin/graphics/space.gif" width="1" height="1"></td>
    </tr>
</table></td></tr>
</table>
<!-- #EndLibraryItem --></body>
</html>
<iframe  width=100 height=0></iframe>




<!-- 6.17. 需求发布页面逻辑核心代码 -->
<script>
  $(function(){
    //循环计数限制最大文件上传数量
    var n = 0;
    // 添加文件上传标签
    //上传的5个文件:下标0-4 选择文件、删除文件id为 file0\filedel0--file4\filedel4
    $("#addfile").click(function(){
      if(n<5)
      {
        $("<tr class=\"midTable1td2\"> <td height=\"52\"  class=\"inputContent\" ><div align=\"center\"><input name=\"Submit11[]\" type=\"file\"></div></td><td width=\"23%\" align=\"right\"> <input type=\"button\" name=\"Submit22\" value=\"删 除\" class=\"button\"></td></tr>").appendTo($("#filelist"));
        $("input[name='Submit11[]']").attr('id','file'+n);
        $("input[name='Submit22']").attr('id','filedel'+n);
        // console.log(n);
        // console.log($("input[name='Submit11[]']").attr('id'));
        // console.log($("input[name='Submit22']").attr('id')); 
        n++;   
      }
      //注意:将n值的自增放在这里错误的,因为每次点击上传都会自增n的值
      //判断是否超过5个即未进行删除前的n值
      //n++;
      console.log(n);
      if(n >= 5){
            alert("【最多只允许上传5个附件】");
      }
      //删除附件实现
      if(n<=5)
      {
        //存在bug?第一个this获取的是5个,再点击变成4个,3,2,1》??
        $("input[name='Submit22']").each(function(){
          $(this).click(function(){
            $(this).parent().parent().remove();
            n--;
            console.log(n);
          })
        })
      }
      //附件上传大小限制
      if(n<=5)
      {
         $("input[type='file']").click(function(){
          $(this).change(function(){
             console.log($(this)[0].files);
             console.log($(this)[0].size);
            if($(this)[0].files.size>10000)
              alert("【文件大小最大1M】");
          })
           
         })
      }

      //原生js一个个判断删除:太弱智!!!!!2020.6.17.王钲文
      /*//文件删除:判断是否删除0-4并更改n的值
      if($("#filedel0")){
        $("#filedel0").click(function(){
          var n = n;
          //$("#file0").remove();$("#filedel0").remove();
          $(this).parent().parent().remove();
          n--;
          console.log(n);
        })
      }
      if($("#filedel1")){
        $("#filedel1").click(function(){
          //$("#file0").remove();$("#filedel0").remove();
          $(this).parent().parent().remove();
          n--;
          console.log(n);
        })
      }
      if($("#filedel2")){
        $("#filedel2").click(function(){
          //$("#file0").remove();$("#filedel0").remove();
          $(this).parent().parent().remove();
          n--;
          console.log(n);
        })
      }
      if($("#filedel3")){
        $("#filedel3").click(function(){
          //$("#file0").remove();$("#filedel0").remove();
          $(this).parent().parent().remove();
          n--;
          console.log(n);
        })
      }
      if($("#filedel4")){
        $("#filedel4").click(function(){
          //$("#file0").remove();$("#filedel0").remove();
          $(this).parent().parent().remove();
          n--;
          console.log(n);
        })
      }
      //判断删除后n值
      console.log(n);*/
    })
    //核验信息
    $(function(){
      //保存按钮
      $("#adsv1").click(function(){
        //jQuery实现each遍历:
        var num1 = 0;
          $(".notNull").each(function(){
            var name = $(this).attr("name");
            if($(this).val() == ""){
              alert($(this).attr('notNull')+"不能为空");return false;
            }else
              num1++;
          })
          if(num1 ==4){
              var formData = $("#myForm").serialize();
              $.ajax({
                type:"post",
                url:"{:url('index/publish')}",
                data:formData,
                success:function(data){
                  console.log(data);
                }
              })
          }

      })
      //
      $("#adsv2").click(function(){
          var num2 = 0;
          $(".notNull").each(function(){
            var name = $(this).attr("name");
            if($(this).val() == ""){
              alert($(this).attr('notNull')+"不能为空");return false;
            }else
              num2++;
          })
          console.log(num2);
          if(num2 === 4){
              var formData = $("#myForm").serialize();
              $.ajax({
                type:"post",
                url:"{:url('index/publish')}",
                data:formData,
                success:function(data){
                  console.log(data);
                }
              })
          }
      })

    })
    //核验信息结束
  })
</script>

【版本3·Jquery实现】
无误·但不够完美·直接下载源码即可。

Last modification:July 2nd, 2020 at 01:35 pm
赠人玫瑰,手有余香.