清空 form 表单 input file类型（reset无效）

最新推荐文章于 2024-09-09 09:04:05 发布

灯盏菜

最新推荐文章于 2024-09-09 09:04:05 发布

阅读量2.2k

点赞数

分类专栏：前端 js

本文链接：https://blog.csdn.net/fcvtb/article/details/81082767

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

其实我也不知道有没清除 input file 的数据，但是我在后台用了两个字段控制，待了解...

页面代码：

 <form class="layui-form layui-form-pane" action="hy_addLegalReview.html" 
                     target="hidden_frame" method="POST" enctype="multipart/form-data">
                     
     <input type="hidden" id="fileRoute" name="fileRoute" value=""/>

      <div class="layui-inline">
		     <div class="inputFileWrapper">
		     <label for="inputFile">
		        <input type="file" id="inputFile" name="FILE" />
		        <span class="custorm-style">
		            <span class="left-button">上传附件</span>
		            <span class="right-text" id="rightText"></span>		           
		        </span>
		    </label>
		    <span class="right-button" onclick="clearInputFile()" id="del-btn" 
                  style="display:none">删除</span>	  
	   	 </div>		   	 
	</div> 
      <div class="layui-form-item layui-layout-admin" style="left: 0;text-align: 
       center;background-color: #eee;">                   
               <input type="submit" value="提交" class="layui-btn" lay-submit=""/>                       
                <a class="layui-btn layui-btn-primary" lay-event="close-btn">取 消</a>               
        </div> 		  	  		       
     </form>

js:

<script>

    function clearInputFile(){
   	
    	  $("#rightText").html("");
    	  $("#fileRoute").val("");
          document.getElementById('del-btn').style.display='none';  //隐藏删除按钮
    }

    var fileBtn = $("input[type=file]");
    fileBtn.on("change", function(){    	
    	
        var index = $(this).val().lastIndexOf("\\");
        var sFileName = $(this).val().substr((index+1));
        
        document.getElementById('del-btn').style.display='block';  //展示删除按钮
        
        $("#rightText").html(sFileName);
        $("#fileRoute").val(sFileName);
    });
</script>