- 点选择框选图片 → 校验（是不是图片、大小）→本地预览（不用发给服务器，浏览器自己看）→ 把图片文件打包成
FormData - 后端（接口干活）：接收
FormData里面的图片 → 存到服务器文件夹 → 返回图片线上地址给前端
重点：jQuery 本身不能直接把图片存服务器！必须靠 AJAX 发请求传给后端接口
一、基础 HTML 结构
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jQuery单图上传</title> <!-- 先引入jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> #previewImg{ width:200px; height:200px; border:1px solid #ccc; display:block; margin-top:10px; } </style> </head> <body> <!-- 文件选择框 accept 只允许选图片 --> <input type="file" id="fileInput" accept="image/jpeg,image/png"> <!-- 预览图片 --> <img id="previewImg" alt="预览图"> <!-- 上传按钮 --> <button id="uploadBtn">提交上传</button> <script> $(function(){ // 先存一个全局变量，保存选中的文件 let targetFile = null; // 监听文件选择 change事件（对应你学的on） $("#fileInput").on("change", ()=>{ // $(this)[0] 把jQuery对象转原生DOM，files是选中的文件列表 let inputDom = $("#fileInput")[0]; // 判断有没有选文件 if(!inputDom.files.length){ return; } // 拿到第一个文件 targetFile = inputDom.files[0]; // ✅ 校验：是不是图片 if(!targetFile.type.startsWith("image/")){ alert("只能选择图片！"); targetFile = null; return; } // ✅ 校验：大小 2M = 2*1024*1024 if(targetFile.size > 2*1024*1024){ alert("图片不能超过2M！"); targetFile = null; return; } // ========== 本地预览 两种办法，推荐FileReader ========== let reader = new FileReader(); // 读完文件触发load reader.onload = (e)=>{ // 把base64地址赋值给img的src $("#previewImg").attr("src", e.target.result); } // 读取文件，转base64 reader.readAsDataURL(targetFile); }) // ✅ 点击按钮，AJAX上传到后端接口 $("#uploadBtn").on("click", ()=>{ if(!targetFile){ alert("请先选择图片！"); return; } // FormData：专门用来传文件的对象 let formData = new FormData(); // append(参数名, 文件) 这个参数名要和后端商量好！ formData.append("imgFile", targetFile); $.ajax({ url:"/api/upload", // 后端给你的上传接口地址 type:"post", data: formData, // 传文件必须关这两个！固定写法 processData: false, contentType: false, success:(res)=>{ console.log("上传成功", res); alert("上传成功，图片地址："+res.url) }, error:(err)=>{ console.log("上传失败", err); alert("上传出错！") } }) }) }) </script> </body> </html>
