js之图片上传

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

下面是效果图和代码

html 复制代码
<!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>

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

相关推荐
再见晴天*_*1 天前
SpringBoot 中单独一个类中运行main方法报错:找不到或无法加载主类
java·开发语言·intellij idea
lqjun08271 天前
Qt程序单独运行报错问题
开发语言·qt
hdsoft_huge1 天前
Java & Spring Boot常见异常全解析:原因、危害、处理与防范
java·开发语言·spring boot
风中的微尘1 天前
39.网络流入门
开发语言·网络·c++·算法
前端君1 天前
实现最大异步并发执行队列
javascript
未来之窗软件服务1 天前
幽冥大陆(二)RDIFSDK 接口文档:布草洗涤厂高效运营的技术桥梁C#—东方仙盟
开发语言·c#·rdif·仙盟创梦ide·东方仙盟
小冯记录编程1 天前
C++指针陷阱:高效背后的致命危险
开发语言·c++·visual studio
1uther1 天前
Unity核心概念⑨:Screen
开发语言·游戏·unity·c#·游戏引擎
知识分享小能手1 天前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
C_Liu_1 天前
C++:类和对象(下)
开发语言·c++