js图片上传详解

点选择框选图片 → 校验是不是图片、大小→本地预览不用发给服务器浏览器自己看→ 把图片文件打包成FormData后端接口干活接收FormData里面的图片 → 存到服务器文件夹 → 返回图片线上地址给前端重点jQuery 本身不能直接把图片存服务器必须靠 AJAX 发请求传给后端接口一、基础 HTML 结构!DOCTYPE html html langzh-CN head meta charsetUTF-8 titlejQuery单图上传/title !-- 先引入jQuery -- script srchttps://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 typefile idfileInput acceptimage/jpeg,image/png !-- 预览图片 -- img idpreviewImg alt预览图 !-- 上传按钮 -- button iduploadBtn提交上传/button script $(function(){ // 先存一个全局变量保存选中的文件 let targetFile null; // 监听文件选择 change事件对应你学的on $(#fileInput).on(change, (){ // $(this)[0] 把jQuery对象转原生DOMfiles是选中的文件列表 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