文件上传的表单必须满足三个条件:
1.表单组件标签只能用:<input type="file" value="xxx">会自动弹框让用户选择文件
2.请求方式只能用post
3.表单编码格式只能用:mutipart/form-data
根据HTTP协议规定,浏览器每次向后台提交参数,都会对参数进行统一编码
以前没有设置过,默认采用编码格式是application/x-www-form-urlencoded,此种编码格式只能
对文本数据进行编码,文件上传的表单格式必须是mutipart/form-data
文件上传的表单格式必须是mutipart/form-data
先搭个架子
选择文件,点击保存
下面是文件上传的请求结构
mutipart/form-data:表示提交的数据,以多段(每一个表单项一个数据)的形式进行拼接,然后以二进制流的形式发送给服务器
说明一点,HTTP请求中,Get请求通常不包含请求体,因此请求头中也没有Content-Type
Content-type用来表示请求体或者响应体(body)中的媒体类型
后端以流的形式接收,看下传过来的body体中的数据
如何让浏览器浏览图片呢？
其实预览图片,也是将图片以二进制流的形式返回的
自己查找资料,在Servlet中,比如说将D:/upload映射到浏览器请求中的某个路径的方法,没有搞明白具体的就不写了
如果用servlet提供预览下面方法笨了点,但是可行,注意因为浏览器发送中文会变成%xx%所以这里将图片改成了数字命名,如果是实际开发中用到,记得中文转换问题
Content-Disposition的值有两种常用
inline表示让浏览器窗口打开 一般用于用于浏览图片和或PDF文件
attachment 用于文件下载
这里因为访问是直接/xxxx文件名跟过来的 所以用/file/*
Content-Type 可以不设置
预览的话 可以不设置
response.setHeader("Content-Disposition", "attachment或者inline; filename=\"" + fileName + "\"");
访问地址:访问地址:
当然也可以用?file=xxx的方式 localhost:8080/fileUpload/file?file=123.jpg
文件下载
改成attachment就好了 注意下 filename=xxx这个是下载后的文件名,可以和原文件设置成不一样
上面方式没有使用第三方jar包,只有上传时候用了@MultipartConfig Servlet-api里的注解,如果上传时连@MultipartConfig也不想用,我就不知道了
关于@MultipartConfig的一些属性
@MultipartConfig(
fileSizeThreshold = 1024 * 1024, // 1 MB
maxFileSize = 1024 * 1024 * 10, // 10 MB
maxRequestSize = 1024 * 1024 * 50 // 50 MB
)
form表单可以这样上传多个文件
也可以这样 加个multiple
这样在弹出窗口的时候,可以按住Ctrl点击多个文件上传
多文件下载 一般是后端将多个文件压缩成（zip） 然后提供一个链接
response.setHeader("Content-Disposition", "attachment; filename=\"multiple_files.zip\"");不需要和原来文件一样,这个是设置下载后的名字
@MultipartConfig 注解告诉Servlet容器，该Servlet将处理多部分请求，其中包括文件上传。
所谓的多部份请求就是
一般文件上传会用到第三方jar 下面演示第三方jar包的方式
comons-fileupload和commons-io
关于这两jar包中常用的方法
预览的话 可以不设置
response.setHeader("Content-Disposition", "attachment或者inline; filename=\"" + fileName + "\"");
下载
注意filename=xxx 是下载后的名字
<!DOCTYPE html>
<html>
<head>
<title>多文件上传示例</title>
<meta charset="UTF-8">
</head>
<body>
<h1>多文件上传示例</h1>
<input type="file" id="fileInput" multiple>
<button onclick="uploadFiles()">上传文件</button>
<div id="response"></div>
<script>
function uploadFiles() {
var fileInput = document.getElementById("fileInput");
var files = fileInput.files;
var xhr = new XMLHttpRequest();
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append("files", files[i]);
}
xhr.open("POST", "UploadServletServlet", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("response").innerHTML = xhr.responseText;
}
};
xhr.send(formData);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>多文件上传示例</title>
<meta charset="UTF-8">
</head>
<body>
<h1>多文件上传示例</h1>
<input type="file" id="fileInput" multiple>
<button onclick="uploadFiles()">上传文件</button>
<div id="response"></div>
<script>
function uploadFiles() {
var fileInput = document.getElementById("fileInput");
var files = fileInput.files;
var xhr = new XMLHttpRequest();
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append("files", files[i]);
}
xhr.open("POST", "UploadServletServlet", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("response").innerHTML = xhr.responseText;
}
};
xhr.send(formData);
}
</script>
</body>
</html>演示用fetch发送请求
多个文件示例
<!DOCTYPE html>
<html>
<head>
<title>多文件上传示例</title>
<meta charset="UTF-8">
</head>
<body>
<h1>多文件上传示例</h1>
<input type="file" id="fileInput" multiple>
<button onclick="uploadFiles()">上传文件</button>
<div id="response"></div>
<script>
function uploadFiles() {
var fileInput = document.getElementById("fileInput");
var files = fileInput.files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append("files[]", files[i]);
}
fetch("UploadServletServlet", {
method: "POST",
body: formData
})
.then(response => response.text())
.then(data => {
document.getElementById("response").innerHTML = data;
})
.catch(error => {
console.error("文件上传失败: " + error);
});
}
</script>
</body>
</html>
