阅读量:1
FormData
快速入门
web前端
<!-- 注意 目前使用tomcat + servlet --> <body> <input id='file-sender' type='file' accept = 'image/*'> <!-- type:指定input的类型为文件上传 accept:接受的文件为所有图片文件 --> <img src='' style='width: 500px;height: 500px' alt="test" id="img-show"/> </body> <script> let fd = new FormData() let FileTag = document.getElementById('file-sender') let img_show = document.getElementById('img-show') FileTag.onchange = function(){ let file = FileTag.files[0] fd.append('file',file) // fd.append(file_name,file) ==> 文件名 + 文件可以多个 /* fd.append('file1',file1) fd.append('file2',file2) fd.append('file3',file3) */ console.log(fd.get('file')) //小小的展示一下图片-------- let url = URL.createObjectURL(file) img_show.src = url; /* 或者使用FileReader let reader = new FileReader() reader.readAsDataURL(file) reader.onload = function(){ img_show.src = reader.result; } */ //------------------------- //发送请求'http://localhost:8080/upload'是你自己的url fetch('http://localhost:8080/home/file',{ method:'POST', body:fd }).then(res=>res.json()).then(res=>{ //这里是接收服务器返回的数据 alert('上传成功' + res) console.log(res) }).catch(err=>{ //这里是接收fetch请求错误 alert('请求错误' + err) console.log(err) }); } </script>web-后端
@WebServlet("/upload") public class UploadServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 获取上传的文件部分 Part filePart = request.getPart("file"); //前端的 fd.append(file_name,file) 我之前的file_name:'file' String fileName = Paths.get(filePart.getSubmittedFileName()).getFileName().toString(); // MSIE fix. /* // 获取文件输入流 try (InputStream fileContent = filePart.getInputStream()) { // 将文件保存到服务器上的某个位置 Files.copy(fileContent, Paths.get("/path/to/destination/" + fileName)); } */ response.getWriter().print("恭喜恭喜！！！!"); } }FormData方法
| 方法名 | 描述 | 使用示例 |
|---|---|---|
| append() | 向FormData对象添加一个字段和对应的值。如果字段已存在，则追加新值。 | formData.append('username', 'user1'); |
| delete() | 从FormData对象中删除指定的字段。如果删除的字段不存在，不会做任何事情。 | formData.delete('username'); |
| get() | 获取指定字段的第一个值。如果字段有多个值，返回第一个值；如果字段不存在，返回null。 | const value = formData.get('key'); |
| getAll() | 获取指定字段的所有值，返回一个数组。如果字段有多个值，返回一个包含所有值的数组；如果字段不存在，返回一个空数组。 | const values = formData.getAll('key'); |
| has() | 检查FormData对象中是否存在指定字段。如果字段存在，返回true；否则，返回false。 | if (formData.has('key')) { ... } |
| set() | 设置指定字段的值，如果字段已存在，则替换现有的值。如果字段不存在，将创建一个新的字段并设置其值。【有多个字段相同将会更新第一个找到的键的值】 | formData.set('key', 'value'); |
| entries() | 返回一个迭代器对象，用于遍历FormData对象的键值对。迭代器对象将返回键值对组成的Array对象，每个键值对是一个包含键和值的数组。 | for (let pair of formData.entries()) { console.log(pair); } |
| forEach() | 遍历FormData对象的每个键值对，并执行指定的回调函数。回调函数接受三个参数：键、值和索引。 | formData.forEach((value, key, formData) => { console.log(${key}: ${value}); }); |
| keys() | 返回一个迭代器对象，用于遍历FormData对象的键。迭代器对象将返回FormData对象的键组成的Array对象。 | for (let key of formData.keys()) { console.log(key); } |
| values() | 返回一个迭代器对象，用于遍历FormData对象的值。迭代器对象将返回FormData对象的值组成的Array对象。 | for (let value of formData.values()) { console.log(value); } |
| Symbol.iterator | 返回一个迭代器对象，用于遍历FormData对象的键值对。这是FormData对象的一个迭代器方法，它允许你使用for...of循环遍历FormData对象中的键值对。 | for (let [key, value] of formData) { console.log(${key}: ${value}); } |
