jQuery图片上传，预览图片，更改input按钮样式

最新推荐文章于 2021-02-17 04:23:50 发布

-殇

最新推荐文章于 2021-02-17 04:23:50 发布

阅读量681

点赞数

文章标签：前端 jquery

本文链接：https://blog.youkuaiyun.com/qq_37377764/article/details/101688541

版权

本文介绍了一个使用jQuery实现的图片上传和预览功能。通过自定义input按钮样式，实现图片选择后立即预览的效果，并提供了上传按钮进行文件传输。代码详细展示了如何使用FileReader API读取图片数据并转换为Base64编码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用了jQuery，上传，预览图片，更改input按钮样式

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		/* 这里为了防止图片比例不失真，不写死参数，具体看需求 */

		.d1 {
			width: auto;
			max-height: 300px;
		}

		/* 选择图片按钮 */

		.file {
			width: 100px;
			height: 34px;
			position: relative;
			background: #D0EEFF;
			border: 1px solid #99D3F5;
			border-radius: 4px;
			text-align: center;
			overflow: hidden;
			color: #1E88C7;
			line-height: 34px;
			cursor: pointer;
		}

		.file>input {
			height: 34px;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			opacity: 0;
			cursor: pointer;
		}

		/* 上传按钮样式 */

		.upload {
			width: 100px;
			height: 34px;
			background: #D0EEFF;
			border: 1px solid #99D3F5;
			border-radius: 4px;
			text-align: center;
			color: #1E88C7;
			line-height: 34px;
			cursor: pointer;
			margin-top: 10px;
		}

		/* 清除input没有路劲时默认框 */
		img[src=''],
		img:not([src]) {
			opacity: 0;
		}
	</style>
</head>

<body>
	<div id="bcd">
		<img class="d1">
	</div>
	<div class="file">选择图片
		<input type="file" id="abc" accept="image/gif,image/jpeg,image/jpg,image/png">
	</div>
	<div class="upload">上传</div>
</body>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
	// 用来做一系列选择判断的变量
	var etarg = '';
	// 选择一张默认图片作为显示
	var _myimg_ = 'img/sky.png';
	//先把默认图片放入到img中
	$('.d1').attr('src', _myimg_);

	// input的值发生改变时触发change
	$("#abc").change(function (e) {
		var imgBox = e.target;
		//这里发生赋值问题
		etarg = imgBox;
		uploadImg($('#bcd'), imgBox);
	});

	function uploadImg(element, tag) {
		var file = tag.files[0];
		if (file == '' || file == undefined || file == null) {
			alert("请选择图片！")
			//因为发生赋值，需要清空，防止用户直接点击上传按钮
			etarg = '';
			$('.d1').attr('src', _myimg_);
			return;
		}
		if (!/image\/\w+/.test(file.type)) {
			alert("您选择的不是图片,请选择图片！");
			//因为发生赋值，需要清空，防止用户直接点击上传按钮
			etarg = '';
			return;
		}
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function () {
			// 用户选择图片后，替换成用户选择的图片
			$('.d1').attr('src', this.result);
		};
	}

	// 上传按钮
	$('.upload').click(function () {
		if (etarg == '') {
			alert('请选择图片上传')
			return;
		}
		// 重新获取input的files
		let _file_ = $('#abc')[0].files[0];
		// 创建FormData空对象
		let formData = new FormData();
		// 把获取input的files放入FormData空对象
		formData.append('file', _file_);
		$.ajax({
			url: '',
			type: 'POST',
			cache: false, //上传文件不需要缓存
			data: formData, //把值传给后端
			processData: false, // 告诉jQuery不要去处理发送的数据
			contentType: false, // 告诉jQuery不要去设置Content-Type请求头
			success: function (data) {
				// 根据后台提示，在提示上传成功
				alert('上传成功！');
			},
			error: function (data) {
				alert("上传失败");
			}
		})
	})
</script>

</html>