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

最新推荐文章于 2024-07-21 11:35:59 发布

原创最新推荐文章于 2024-07-21 11:35:59 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

6 篇文章

订阅专栏

6 篇文章

订阅专栏

本文介绍了一个使用layui框架实现的文件上传功能，并通过JavaScript控制文件上传控件的清空操作。具体实现了当用户选择文件后显示文件名，并提供删除按钮以清空已选文件。

其实我也不知道有没清除 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>