用Button更换文件上传控件的样式

最新推荐文章于 2023-02-22 15:48:53 发布

郎兴

最新推荐文章于 2023-02-22 15:48:53 发布

阅读量206

点赞数

分类专栏： JavaScript 文章标签： js jquery html

本文链接：https://blog.csdn.net/qq_40658805/article/details/112916726

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用Button更换文件上传控件的样式

文件上传原始控件

在这里插入图片描述

更换为Button后：

在这里插入图片描述
注意：大家可以根据自己的喜好更改button和lable的样式

JSP文件

<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>文件上传按钮美化</title>
  </head>
  <body>
    <div>
      <table id="file-tab">
        <tr>
          <td style="width : 300px;background: #f1f3f4">
            <lable id="filePath" style="width : 100%; text-align: left"></lable>
          </td>
          <td>
            <input type="file" style="width : 100%;display: none" onchange="updFilePath(this)" name="file">
            <button type="button" style="width : 100%" onclick="selectFile(this)">&nbsp选择文件</button>
          </td>
        </tr>
      </table>
    </div>
    <%--此处可选择引入自己项目中的jquery.min.js文件--%>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
      /* 选择文件 */
      function selectFile(obj){
        var filePicker =  obj.previousElementSibling;//获取obj的上一个兄弟节点<input type="file"...>
        filePicker.click();//为filePicker绑定click()事件
      }
      /* 将文件路径更新到lable控件中 */
      function updFilePath(obj){
        var lable = $("#filePath");
        lable.html(obj.value);
      }
    </script>
  </body>
</html>

郎兴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Button更换文件上传控件的样式

HTML文件上传按钮美化原始按钮美化后的按钮HTML<table id="file-tab"> <tr> <td style="width : 500px"> <label class="layui-form-label" style="width : 100%; text-align: left"></label> </td> <td> <input type="file" st
复制链接

扫一扫