下面是关于“Java Web文件上传和图片上传实例”的攻略及示例。
一、文件上传和图片上传的区别
文件上传和图片上传本质上类似，都是将本地文件上传到服务器的某个文件夹中。但是，图片上传还需要进行图片预览和显示操作，所以相较于文件上传，图片上传多了一些处理操作。
二、Java Web实现文件上传和图片上传
在Java Web中，文件上传和图片上传的核心是使用MultipartRequest类解析HTTP请求。MultipartRequest类提供了解析HTTP请求的便利方法，可以从HTTP请求中提取出POST请求中的各个参数。
下面分别给出文件上传和图片上传的实现思路和部分示例代码。
2.1 文件上传
文件上传一般会用到Java Web中的javax.servlet包中的Part类和javax.servlet.http包中的HttpServletRequest类。
实现思路：
- 在HTML表单中添加一个input标签，type为“file”；
- 在Java Servlet中通过HttpServletRequest获取到上传的文件；
- 使用Part对象获取上传的文件的内容；
- 将上传的文件存储到指定位置。
下面是一个简单的文件上传示例：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传示例</title>
</head>
<body>
<form action="fileupload" method="POST" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="提交">
</form>
</body>
</html>
Servlet代码：
@WebServlet("/fileupload")
@MultipartConfig
public class FileUploadServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Part filePart = request.getPart("file");
String fileName = filePart.getSubmittedFileName();
String fileSavePath = request.getServletContext().getRealPath("/WEB-INF/uploads/" + fileName);
filePart.write(fileSavePath);
}
}
2.2 图片上传
图片上传相较于文件上传，还需要多进行图片预览和显示操作。为了实现图片预览和显示，我们可以使用一些前端框架或者JavaScript库。这里我们以JQuery为例，给出一个简单的图片上传示例。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传示例</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data">
<input id="file-input" type="file" name="file">
<img id="preview" src="" alt="" width="200px" height="200px">
<input id="file-upload-button" type="button" value="上传">
</form>
<script>
$(document).ready(function () {
// 预览图片
$("#file-input").change(function () {
var reader = new FileReader();
reader.onload = function (e) {
$("#preview").attr("src", e.target.result);
};
reader.readAsDataURL(this.files[0]);
});
// 上传图片
$("#file-upload-button").click(function () {
var formData = new FormData();
formData.append("file", $("#file-input")[0].files[0]);
$.ajax({
url: "imageupload",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function (result) {
alert("上传成功！");
}
})
});
});
</script>
</body>
</html>
Servlet代码：
@WebServlet("/imageupload")
@MultipartConfig
public class ImageUploadServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Part filePart = request.getPart("file");
String fileName = filePart.getSubmittedFileName();
String fileSavePath = request.getServletContext().getRealPath("/WEB-INF/uploads/" + fileName);
filePart.write(fileSavePath);
}
}
需要注意的是，本示例中图片的上传与文件的上传是完全相同的，唯一的区别在于前端使用了JQuery实现了图片的预览和显示。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：java web图片上传和文件上传实例 - Python技术站
微信扫一扫 
支付宝扫一扫 