修改HTML文本上传（type file）的样式

最新推荐文章于 2024-05-30 08:00:00 发布

rocling

最新推荐文章于 2024-05-30 08:00:00 发布

阅读量2.3k

点赞数

分类专栏： javascript 文章标签： js 上传文件

本文链接：https://blog.csdn.net/rocling/article/details/81736014

版权

javascript 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!DOCTYPE html>
<html>
<head>
    <title>kemp的教程</title>
    <style>
        #lab-file {
            font-size: 12px;
            padding: 10px 30px;
            background: #101213;
            color: #FFF;
            border: none;
            border-radius: 5px;
        }
        #uploadFile {
            display: none;
        }

    </style>
    <!--不需要再次引用jquery-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    </script>
    <script type="text/javascript">

    var uploadFile=document.querySelector("#uploadFile").files[0];
    //jquery获取$("#uploadFile").prop("files")[0];
    var formData = new FormData();
    formData.append('fileTypeId', fileType);//其他需要上传的字段
    formData.append('file', uploadFile);//文件
    $.ajax({
        url:"", //路径，指向spring controller
        type:"post",
        data:formData,
        success:function(){},
        error:function(){}
    })//没有什么特别需要注意的

    </script>

</head>

<body>
<div id="uploadForm">
    <label for="uploadFile" id="lab-file">上传文件</label>
    <input id="uploadFile" type="file"/>
    <button id="upload" type="button">upload</button></div>

    <br><br>
    <hr>
    <p>原始类型</p>
    <input id="upFile" type="file">

</body>

</html>

效果：

参考：https://jingyan.baidu.com/article/3aed632edb492a70108091f3.html

rocling

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
修改HTML文本上传（type file）的样式

&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;kemp的教程&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫