js之图片上传

最新推荐文章于 2024-08-29 21:19:22 发布

刘志辉

最新推荐文章于 2024-08-29 21:19:22 发布

阅读量789

点赞数 18

文章标签： javascript okhttp 开发语言

本文链接：https://blog.csdn.net/weixin_58462329/article/details/139069911

版权

话不多说，直接上干货，注释在代码里面

下面是效果图和代码

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>Document</title>
		<style>
			/* form 表单定位 */
			.form-upload {
				width: 200px;
				height: 200px;
				border: 1px solid red;
				margin: 200px auto;
				position: relative;
			}

			/* 相对于form 表单定位 设置提醒文字 位于 第五层 */
			.form-upload-text {
				position: absolute;
				z-index: 5;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			/* 相对于 form 表单定位 设置 点击范围位于最上层 第十层 */
			.form-upload-file {
				position: absolute;
				z-index: 10;
				width: 200px;
				height: 200px;
				background-color: orange;
				opacity: 0;
			}

			/* 相对于 form 表单 定位设置 位于 文字 与 文件中间展示 第八层 */
			.form-upload-imgs {
				position: absolute;
				z-index: 8;
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<form class="form-upload" id="formUpload" action="" method="post" enctype="multipart/form-data">
			<span class="form-upload-text" id="submitButton">上传图片</span>
			<input type="file" class="form-upload-file" name="image" size="50" onchange="fileChange(this)">
			<img src="" class="form-upload-imgs" alt="">
		</form>
		<script>
			var imgUrl = ''

			function fileChange(target) {
				// 点击 input 的时候
				if (target.tagName === 'INPUT') {
					// 获取 form 表单的 第一个元素
					var formData = new FormData($('#formUpload')[0])
					// 发送 ajax 
					$.ajax({
						// 类型
						type: "POST",
						// url  地址
						url: "xxxxxxx",
						// 表单数据
						data: formData,
						// 是否异步
						// async: false,
						// 请求头设置
						contentType: false,
						// processData 默认为true，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
						// 默认情况下会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded
						// 如果想发送不想转换的的信息的时候需要手动将其设置为false
						processData: false,
						// 成功的回调
						success: function(res) {
							console.log('图片 ----》 ', res)
							// 这里是 上传成功后 后台会返回 一个图片的绝对路径
							imgUrl = res.data.imgUrl
							// 找到 img 标签设置它的 图片路径
							$('.form-upload-imgs').attr('src', imgUrl)
						},
						// 失败的回调
						error: function(returndata) {
							console.log(returndata);
						}
					})
				}

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

谢谢大家观看，我是小辉，请大家多多关照