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}); } |