前端input上传图片怎么去掉文件名并更改样式

最新推荐文章于 2024-08-12 16:30:53 发布

林小白的日常

最新推荐文章于 2024-08-12 16:30:53 发布

阅读量746

点赞数

分类专栏： javascript 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_51609337/article/details/130400153

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

正常input框上传文件的写法：

<input id="imageFile1"  type="file" name="imageFile" accept="image/png,image/jpg,image/jpeg,image/bmp">

样式为：

选择文件：

功能可以实现，但是有时候不需要展示图片的名称，如何实现，具体如下：

html部分：

<input type="" class="input1" name="" id="" value="" />
<button type="frontclick()"  class="button1">选择照片</button>
<input id="imageFile1"  type="file" name="imageFile" accept="image/png,image/jpg,image/jpeg,image/bmp" style="display: none"/>

全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="pageCon">
			<div class="page">
				
				<div class="content">
					<div class="inputCon1">
						<div class="hang">
							<input type="" class="input1" name="" id="" value="" />
							<button type="frontclick()"  class="button1">选择照片</button>
							<input id="imageFile1"  type="file" name="imageFile" accept="image/png,image/jpg,image/jpeg,image/bmp" style="display: none"/>
						</div>
					</div>
					<div class="imgCon">
						<img class="img1" src="" alt="" style="width: 200px;height: auto;">
					</div>
				</div>
				
			</div>
		</div>
		<script type="text/javascript">
			$('.button1').click(function () {
				$('#imageFile1').click();
			})
			//图片加载
			$("#imageFile1").change(function () {
				var file = this.files[0];
				if (window.FileReader) {
					var reader = new FileReader();
					reader.readAsDataURL(file);
					//监听文件读取结束后事件
					reader.onloadend = function (e) {
						//e.target.result就是最后的路径地址
						$(".imgCon .img1").attr("src",e.target.result);
						let inputVal = e.target.result.substr(0,40) + '...'
						$(".input1").val(inputVal);
			
					};
				}
			});


		</script>
	</body>
</html>

运行效果：