js---file样式直接上传，只有一个控件

原创于 2021-04-26 13:18:25 发布 · 212 阅读

0 ·

CC 4.0 BY-SA版权

此文章来自李晨璐专栏，转载请声明

B/S 同时被 2 个专栏收录

6 篇文章

订阅专栏

JavaScript

4 篇文章

订阅专栏

这篇博客介绍了如何利用HTML的label元素与input元素进行绑定，以创建一个美观的文件上传按钮。通过更改label样式并监听input的onchange事件，可以实现文件选择后的样式变化，从而提供用户友好的上传体验。

需求

解决方案

利用lable标签和input进行绑定，更改lable的样式，触发input事件

  <form id="myform" action="/device/excel/import.htm", method="post" , enctype="multipart/form-data" style="float: right;" >
      <%--通过label标签与input标签绑定--%>
       <label for='my_file' class='inputlabelBox'  >
       <a class="btn btn-submit" href="javascript:function_select_file();"><i class="glyphicon glyphicon-export"></i>上传资产信息</a>
      </label>
     <input type="file" name="file" onchange="change(event)" style="float: right; width: 200px; height: 35px; display:none;" id="my_file" />
</form>