文件选择标签 type="file" 属性可以获取选择文件 accept="image/*" 推荐选择 图片类 /* 通配,所有 placeholder 提示信息 语法: 1. `accept`属性引导用户选择文件 1. 多个用`,`分隔 2. `image/*`,所有图片 3. 它定义了文件 input 应该接受的文件类型 2. `onchange`会在选择的文件改变时触发 3. `files`属性可以获取选择的文件
<body> <!-- 文件选择标签 type="file" 属性可以获取选择文件 accept="image/*" 推荐选择 图片类 /* 通配,所有 placeholder 提示信息 语法: 1. `accept`属性引导用户选择文件 1. 多个用`,`分隔 2. `image/*`,所有图片 3. 它定义了文件 input 应该接受的文件类型 2. `onchange`会在选择的文件改变时触发 3. `files`属性可以获取选择的文件 --> <input type="file" name="avatar" accept="image/*" placeholder="请选择头像" /> <script> // change 内容发生变化时触发 const inpit = document.querySelector('[type="file"]'); inpit.addEventListener("change", (e) => { // files[0] 上传文件的信息 文件流 console.log(e); console.log(e.target); // 后续把相关的信息给到后端 console.log(e.target.files[0]); }); </script> </body>使用接口直接通过FormData 上传头像
<body> <h2>直接通过FormData</h2> <!-- e.target.files[0] --> <!-- 推荐用户选择 图片 --> <input type="file" accept="image/*" /> <img src="" alt="" /> <!-- 点击按钮 上传用户选择的图片 --> <button>上传</button> <script src="./lib/axios.js"></script> <script> // 1.点击按钮上传图片 document.querySelector("button").onclick = () => { // 1.1获取上传的文件、图片 const img = document.querySelector('[type="file"]').files[0]; // console.log(img); // 1.2将上传的文件存起来 const data = new FormData(); data.append("avatar", img); // console.log(data.get("avatar")); // 1.3发送请求 把数据增加到后端 axios({ method: "post", url: "http://ajax-api.itheima.net/api/file", data, }).then((res) => { console.log(res); // 1.4把图片显示在页面 document.querySelector("img").src = res.data.data.url; }); }; </script> </body>
标签:文件,log,data,FormData,file,上传 From: https://www.cnblogs.com/JAG2671169285/p/16941232.html