获取input上传文件文件名及扩展名

最新推荐文章于 2024-02-07 09:47:50 发布

可乐6666

最新推荐文章于 2024-02-07 09:47:50 发布

阅读量4w

点赞数 12

文章标签： input上传文件名 input扩展名

本文链接：https://blog.csdn.net/xuexizhe88/article/details/52165704

版权

1、使用input标签的type=“file”，上传文件，获取上传文件的文件名和扩展名；

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#mybtn{
				width: 100px;
				height: 30px;
				font-size: 18px;
				background-color: lightcoral;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<input type="file" name="myfile" id="myfile" value="" />
		<button id="mybtn">点击</button>
	</body>
	<script type="text/javascript">
		//获取一个上传文件的扩展名
		var myfile = document.getElementById('myfile');
		var mybtn = document.getElementById('mybtn');
		mybtn.onclick = function(){
			//获取文件上传文件的文件名和扩展名
			if(myfile.files[0] == undefined){
				alert('未上传文件！');
			}else{
				//获取上传文件的文件名
				alert(<span style="color:#FF0000;">myfile.files[0].name</span>);
			}
			//获取上传文件的扩展名
			var filevalue = myfile.value;
			var index = filevalue.lastIndexOf('.');
			alert(<span style="color:#FF0000;">filevalue.substring(index)</span>);
		}
	</script>
</html>

可乐6666

关注

12
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
获取input上传文件文件名及扩展名

1、使用input标签的type=“file”，上传文件，获取上传文件的文件名和扩展名；代码如下： #mybtn{ width: 100px; height: 30px; font-size: 18px; background-color: lightcoral; text-align: center; }
复制链接

扫一扫