美化input文件上传按钮

朴灿烈づ我的快乐病毒、 2022-05-13 13:36 280阅读 0赞

效果演示：

![70][]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>美化文件上传按钮</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
        <style>
    
        </style>
    </head>
    <body>
    	<div class="container">
    		<h3>美化文件上传按钮</h3>
    	    <label for="upVideo">
    	    	<div id="upVideoBtn" class="btn" type="button">选择视频</div>
    	    </label>
    		<input id="upVideo" style="display:none" type="file" accept="video/mp4,audio/mp4" name="upVideo">
    	</div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script>
    	$('#upVideo').on('change',function(){
    		//alert($('#upVideo').val());  //绝对路径
    		//分割成数组，提取文件名
    		var arr = $('#upVideo').val().split('\\');
    		var fileName = arr[arr.length-1];
    		$('#upVideoBtn').text(fileName);
    		$('#upVideoBtn').attr('class','btn btn-success');
    		if(!fileName){
    			$('#upVideoBtn').text('选择视频');
    			$('#upVideoBtn').attr('class','btn');
    		}
    	});
    </script>
    </body>
    </html>

[70]: /images/20220504/decee3e25efc45c8a119583a16d920ab.png

发表评论取消回复

表情：

评论列表（有 0 条评论，280人围观）

还没有评论，来说两句吧...

相关阅读

相关单选框和上传文件的input的样式美化

1.效果如下： ![在这里插入图片描述][20190920160749623.png] 2.HTML代码如下： <div> <...

红太狼/ 2024年04月20日 09:00/ 0 赞/ 7 阅读

相关【HTML】上传文件input样式美化

起因，最近因为一些原因，在写一个前端小页面，但是上传文件的样式怎么调整都不是很满意。遂转变思维想到了如下方法。传统写法 <form id="upform" e

Love The Way You Lie/ 2022年05月27日 12:57/ 0 赞/ 1066 阅读

相关美化input文件上传按钮

效果演示： ![70][] <!-- / @Author: Ding Jianlong @Date: 2018-09-21 13:25

朴灿烈づ我的快乐病毒、/ 2022年05月13日 13:36/ 0 赞/ 281 阅读

相关 input 文件上传 --- 只上传指定文件

> 最近项目要做一个文件上传功能, 只上传 Excel 表统计数据,这里只需在form表单中 input 标签中,添加一个属性即可 <%--存放上传文件的表单域，名

你的名字/ 2022年05月11日 00:16/ 0 赞/ 509 阅读

相关美化上传文件的html代码

上传文件图片的代码是这个 <input type="file" /> 效果如下 ![20190311140842787.png][] 很丑的样式 very u

墨蓝/ 2022年03月10日 14:50/ 0 赞/ 387 阅读

相关 <input type="file" />，美化自定义上传按钮

上传的按钮实在是太丑了，今天看了别人的文章，自己找了找资料，琢磨了一下，结果如下。图片如下： ![05171134-2246e6d94558456c

妖狐艹你老母/ 2022年01月05日 14:41/ 0 赞/ 239 阅读

相关 input = file 实现上传文件

使用input = file实现文件上传功能，如果点击提交按钮，提交表单并上传选中的文件： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

待我称王封你为后i/ 2021年12月18日 15:53/ 0 赞/ 366 阅读

相关 input按钮上传按钮样式

主要是定位和不透明度来实现： <!DOCTYPE html> <html lang="en"> <head> <meta charse

╰半夏微凉°/ 2021年12月17日 09:37/ 0 赞/ 405 阅读

相关 js上传文件；input上传文件；

html原生上传文件方式1： ![在这里插入图片描述][20210324233047985.gif] <!DOCTYPE html> <html>

小灰灰/ 2021年09月07日 06:20/ 0 赞/ 568 阅读

相关 js input文件上传

(1)设置类型type='file' 属性: accept='格式1,格式2' 前台筛选文件格式允许所有图片格式:"image/

柔光的暖阳◎/ 2021年07月25日 00:15/ 0 赞/ 522 阅读