首页 > 其他分享 >美化input文件上传按钮

美化input文件上传按钮

时间:2024-01-08 18:31:38浏览次数:32  
标签:arr upVideo fileName upVideoBtn 按钮 input btn 上传

效果演示:

美化input文件上传按钮_input


源码如下: 

<!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>

标签:arr,upVideo,fileName,upVideoBtn,按钮,input,btn,上传
From: https://blog.51cto.com/ding/9148978

相关文章

  • 使用VBScript清理%AppData%\Microsoft\InputMethod\Chs下的UDP*.tmp文件
    目录代码使用方法话题来源彩蛋——Windows操作系统下到底有多少种脚本语言?代码'VBScripttolistUDP*.tmpfilesandaskuserfordeletionOptionExplicit'DeclarevariablesDimWSHShell,FSO,TargetFolder,FileCollection,FileDimTargetPattern,FilesToDelete,Fi......
  • Java中的InputStream和OutputStream详解
    引言在Java编程中,处理输入输出是日常任务的一部分,而流(Stream)是实现输入输出的核心概念。在JavaI/OAPI中,InputStream和OutputStream是所有字节流类的基础。本文将详细介绍这两个类及其在Java中的应用。什么是InputStream和OutputStream?InputStream是JavaI/O库中的一个抽象类,它......
  • Nest 实现大文件分片上传
    文件上传是常见需求,只要指定content-type为multipart/form-data,内容就会以这种格式被传递到服务端:服务端再按照multipart/form-data的格式提取数据,就能拿到其中的文件。但当文件很大的时候,事情就变得不一样了。假设传一个100M的文件需要3分钟,那传一个1G的文件就需要30......
  • RuoYi-Cloud-Plus使用minio进行文件上传图片后无法预览解决_修改minio配置minio桶权限
     在文件管理的位置,发现刚刚上传的图片文件,会显示 预览图片失败 后来经过多方查看,发现是minio的配置的问题可以从这里:可以看到首先登录RuoYi-Cloud-Plus系统然后,打开文件管理页面可以看到,当上传了图片文件以后显示文件展示中,文件预览失败,那么这个时......
  • Three.js——十三、自定义大小画布、UI交互按钮以及3D场景交互、渲染画布为文件(图片)
    画布全屏以及自定义大小画布<!--canvas元素默认是行内块元素--><divclass="model"style="background-color:#ff0000;"width="300"height="180"></div>画布随窗口变化//画布跟随窗口变化window.onresize=function(){constwidth......
  • • 如何在flask中处理文件上传
    问题如何在flask中处理文件上传步骤123在Flask中处理文件上传的步骤如下:1.**创建HTML表单**:首先,你需要在前端创建一个HTML表单来接受用户上传的文件。表单的`enctype`属性应设置为`multipart/form-data`,以便浏览器以二进制形式发送文件¹²。```html<!doctypehtml><......
  • STM32-IC(Input Capture)输入捕获
    电平跳变(上升沿或下降沿),可以通过程序配置,发生电平跳变时,输入捕获电路会让当前CNT计数器的值锁存到CCR,锁存CCR的意思就是把当前CNT的值读出来,写入CCR中。1、IC(InputCapture)输入捕获。2、输入捕获模式下,当通道输入引脚出现指定电平跳变时,当前CNT的值将被锁存到CCR中,可用于测......
  • 去掉bootstrap4自带的input输入框半透明阴影
    bootstrap 输入框等输入时会自带蓝色阴影效果,有时候我们并不需要。button同理查看bootstrap.css代码,搜索focus,找到相关内容。所以我们再写css,把它原来的覆盖掉就可以啦/*去掉bootstrap自带的input输入框半透明阴影*/.form-control:focus{ box-shadow:none;}......
  • 浏览器接口 fetch 发起的请求如何跟踪上传进度?
    在使用浏览器接口`fetch`发起请求时,你可以利用`ReadableStream`对象的`onprogress`事件来跟踪上传进度。`fetch`函数返回的是一个`Promise`对象,可以通过调用`response.body.getReader()`获取到`ReadableStream`,然后通过监听`onprogress`事件来获取上传进度信息。以下是一个示例代码......
  • 如何将视频上传到可用于HTML5 <video> 标签的 'src' 属性的平台?
    要将视频上传到可用于HTML5<video>标签的'src'属性的平台,您需要遵循以下步骤:1.选择一个支持视频上传的平台,例如YouTube、Vimeo或自建服务器。2.注册并登录到所选平台。3.创建一个新的视频项目或上传您的视频文件。4.获取视频的嵌入代码或URL。这通常可以在平台的......