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>

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

相关推荐
workflower3 小时前
单元测试-例子
java·开发语言·算法·django·个人开发·结对编程
YuanlongWang3 小时前
C# 基础——装箱和拆箱
java·开发语言·c#
b78gb3 小时前
电商秒杀系统设计 Java+MySQL实现高并发库存管理与订单处理
java·开发语言·mysql
Y42583 小时前
本地多语言切换具体操作代码
前端·javascript·vue.js
LXS_3574 小时前
Day 05 C++ 入门 之 指针
开发语言·c++·笔记·学习方法·改行学it
fruge4 小时前
React 2025 完全指南:核心原理、实战技巧与性能优化
javascript·react.js·性能优化
etsuyou6 小时前
js前端this指向规则
开发语言·前端·javascript
shizhenshide6 小时前
为什么有时候 reCAPTCHA 通过率偏低,常见原因有哪些
开发语言·php·验证码·captcha·recaptcha·ezcaptcha
mit6.8246 小时前
[Agent可视化] 配置系统 | 实现AI模型切换 | 热重载机制 | fsnotify库(go)
开发语言·人工智能·golang
友友马6 小时前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt