Java Web 图片上传和文件上传实例详解
在 Java Web 开发中，图片上传和文件上传是一个非常常见的操作。本文将会介绍如何在 Java Web 中实现图片上传和文件上传，以及如何在前端进行用户体验的优化。
上传文件的基本步骤
上传文件的基本步骤如下：
- 创建一个表单，用于选择文件。表单的 method 必须为 POST， enctype 必须为 multipart/form-data。
- 在后台使用 MultipartRequest 的方式进行文件上传。
- 在后台将上传的文件流输出到指定的位置，一般是服务器上的磁盘路径。
- 在后台处理完毕后，返回一个上传成功的页面。
实现图片上传
使用 JSP 实现图片上传
下面是一个使用 JSP 实现图片上传的例子。在这个例子中，我们将会使用 Apache 的 FileUpload 组件来完成上传操作。
首先，我们需要通过 Maven 或是手动下载来获得 FileUpload 组件：
<!-- pom.xml -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>
接着，我们就可以使用 FileUpload 组件了。下面是一个在 JSP 中实现图片上传的例子：
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<%@ page import="java.io.*" %>
<html>
<head>
<title>文件上传示例</title>
</head>
<body>
<form method="post" action="upload.jsp" enctype="multipart/form-data">
<input type="file" name="file" />
<br />
<input type="submit" value="提交" />
</form>
<%!
private static final String UPLOAD_DIRECTORY = "uploads";
private void upload(HttpServletRequest request) throws ServletException, IOException {
// 检查上传的文件是否存在
if (!ServletFileUpload.isMultipartContent(request)) {
throw new ServletException("上传的文件不存在");
}
// 创建一个 FileItemFactory 实例
DiskFileItemFactory factory = new DiskFileItemFactory();
// 设置缓存区大小
factory.setSizeThreshold(1024 * 1024);
// 创建一个 ServletFileUpload 实例
ServletFileUpload upload = new ServletFileUpload(factory);
// 设置上传文件的最大大小限制
upload.setFileSizeMax(1024 * 1024 * 10);
// 设置上传文件的总大小限制
upload.setSizeMax(1024 * 1024 * 50);
// 处理上传的文件
List<FileItem> items = upload.parseRequest(request);
for (FileItem item : items) {
if (!item.isFormField()) {
String fileName = new File(item.getName()).getName();
String filePath = UPLOAD_DIRECTORY + File.separator + fileName;
File storeFile = new File(filePath);
// 保存文件到硬盘
item.write(storeFile);
}
}
}
%>
<%!
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 将请求的 ContentType 设为 multipart/form-data
response.setContentType("text/html;charset=utf-8");
// 处理文件上传
upload(request);
// 返回上传成功的提示信息
PrintWriter out = response.getWriter();
out.print("<html><body>");
out.print("<h3>文件上传成功</h3>");
out.print("</body></html>");
}
%>
</body>
</html>
在这个例子中，我们使用 FileUpload 组件在后台对上传的文件进行了处理，并将上传的文件保存到了指定的文件夹中。
使用 SpringMVC 实现图片上传
下面是一个使用 SpringMVC 实现图片上传的例子。同样的，我们还是使用 Apache 的 FileUpload 组件来完成文件上传操作。
首先，我们需要通过 Maven 或是手动下载来获得 FileUpload 组件：
<!-- pom.xml -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>
接着，我们需要在 SpringMVC 中配置 MultipartResolver Bean 来完成文件上传的操作。下面是一个示例：
<!-- applicationContext.xml -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 设置文件上传的最大限制 -->
<property name="maxUploadSize" value="10485760" />
</bean>
我们还需要在 Controller 中实现文件上传操作。下面是一个示例：
@Controller
@RequestMapping("/file")
public class FileUploadController {
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public String upload(@RequestParam MultipartFile file, ModelMap modelMap) {
if (!file.isEmpty()) {
try {
byte[] bytes = file.getBytes();
//设置图片保存位置
String imagePath = "/tmp/";
String fileName = file.getOriginalFilename();
File fileToSave = new File(imagePath + fileName);
// 写入磁盘
BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(fileToSave));
stream.write(bytes);
stream.close();
modelMap.addAttribute("fileName", fileName);
return "fileUploadResult";
} catch (Exception e) {
return "fileUploadError";
}
} else {
return "fileUploadError";
}
}
@RequestMapping(value = "/showUploadForm")
public String showUploadForm() {
return "fileUploadForm";
}
}
在这个例子中，我们在 Controller 中使用了 SpringMVC 提供的 MultipartFile 对象来操作上传的文件。
文件上传优化
上传文件的过程并不是非常快，如果用户要上传较大的文件，可能需要等待很长时间，给用户带来了不好的用户体验。这个时候可以使用以下技术来进行文件上传的优化。
使用 Ajax 完成文件上传
使用 Ajax 完成文件上传，可以有效地减小用户的等待时间，从而提升用户体验。在使用 Ajax 完成文件上传时，我们需要使用 jQuery 和 jQuery Form 插件。
接下来，我们就可以在前端使用以下方式来完成文件上传：
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax 文件上传实例</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
</head>
<body>
<h1>文件上传示例</h1>
<form method="post" action="upload" enctype="multipart/form-data" id="myForm">
<input type="file" name="file" />
<br />
<br />
<button type="submit">上传文件</button>
</form>
<script>
$(document).ready(function() {
$('#myForm').submit(function() {
$(this).ajaxSubmit({
beforeSubmit: function() {
// 添加 loading 效果
$('#loading').show();
},
success: function(responseText, statusText, xhr, $form) {
// 关闭 loading 效果
$('#loading').hide();
alert('文件上传成功');
}
});
return false;
});
});
</script>
</body>
</html>
在这个例子中，我们首先在前端使用了基本的表单来进行文件上传，然后通过 jQuery Form 插件来对表单进行 AJAX 化。
使用 AngularJS 完成文件上传
AngularJS 是一种前端框架，可以有效地简化前端开发的复杂性。在文件上传方面，AngularJS 提供了 ng-file-upload 插件来帮助我们完成文件上传操作。
首先，我们需要在前端通过 Bower 或是手动下载来获取 ng-file-upload 插件：
bower install ng-file-upload
然后，在前端里使用以下方式来完成文件上传：
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>文件上传示例</title>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-file-upload/2.5.0/angular-file-upload.js"></script>
<style type="text/css">
#loading {
display: none;
font-size: 18px;
}
</style>
</head>
<body>
<div ng-controller="UploadCtrl">
<h1>文件上传示例</h1>
<form>
<input type="file" ngf-select ng-model="file" name="file" />
<br />
<br />
<button type="submit" ng-click="submit()">上传文件</button>
</form>
<div id="loading">正在上传文件，请稍等...</div>
</div>
<script>
var myApp = angular.module('myApp', ['ngFileUpload']);
myApp.controller('UploadCtrl', ['$scope', 'Upload', function ($scope, Upload) {
$scope.submit = function () {
// 较慢的文件上传速度会屏蔽 loading 窗口和赋值转旋转的效果，所以要在这里保持成可见的形式
$('#loading').show();
// 开始文件上传
Upload.upload({
url: '/upload',
data: {file: $scope.file}
}).then(function (resp) {
// 上传成功
$('#loading').hide();
alert("上传成功！");
}, function (resp) {
// 上传失败
$('#loading').hide();
console.log(resp);
alert("上传失败！");
}, function (evt) {
// 文件上传进度
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('上传进度: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
};
}]);
</script>
</body>
</html>
在这个例子中，我们在前端使用了上传插件 ng-file-upload，在后台使用 SpringMVC 进行了处理。
总结
本文介绍了如何在 Java Web 中实现图片上传和文件上传，还介绍了文件上传的优化技术。文件上传是 Web 开发中一个非常常见的操作，我们需要使用最好的方式来完成文件上传操作，从而提升用户体验。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：java web图片上传和文件上传实例详解 - Python技术站
微信扫一扫 
支付宝扫一扫 