话不多说，直接上干货，注释在代码里面
下面是效果图和代码
<!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>
谢谢大家观看，我是小辉，请大家多多关照
