一、传统方式
(1)准备好前台页面upload.html
设置表单属性:
action=上传文件后台接口
method="post"(必须是post)
enctype="multipart/form-data" (表明需要向服务器发送二进制数据,而不是常规的文本)
文件输入框 <input type="file">
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="files">
<input type="submit" value="上传">
</form>
(2)加入相应的jar包
(3)准备接收文件上传Servlet
url路径一定要与上面表单的action保持一致
(4)编写文件上传后台代码
try {
// 配置上传参数
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
// 解析请求的内容提取文件数据
@SuppressWarnings("unchecked")
List<FileItem> formItems = upload.parseRequest(request);
// 迭代表单数据
for (FileItem item : formItems) {
// 处理不在表单中的字段
if (!item.isFormField()) {
String fileName = item.getName();
//定义上传文件的存放路径
String path = request.getServletContext().getRealPath("/uploadFiles");
//定义上传文件的完整路径
String filePath = String.format("%s/%s",path,fileName);
File storeFile = new File(filePath);
// 在控制台输出文件的上传路径
System.out.println(filePath);
// 保存文件到硬盘
item.write(storeFile);
}
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.write("上传完成");
out.close();
}
} catch (Exception ex) {
}
(5)准备存放上传文件的目录,注意和上面代码中的路径保持一致
注意:空的目录idea不会更新到服务器(这应该是个bug),所以可以在里面随便放个文件,哪怕再删掉也行,迫使idea更新
二、使用uploadify插件
上传功能在我们的程序中是经常会用到的,而传统的http上传在安全性和文件大小上都会有一定的限制,而且不能看到上传进度。Uploadify是一款基于jQuery的无刷新前端上传插件,主要有以下的特点:
1、高度地定义化,参数、方法和事件丰富
2、支持多文件上传和进度显示
3、采用异步工作方式
使用方法:
(1)加入插件
直接将uploadify压缩包解压,复制到项目中
(2)准备上传文件页面
<input id="upload" name="files" type="file" >
<input type="button" onclick="upload()" value="上传">
<script>
$("#upload").uploadify({
'swf': 'uploadify/uploadify.swf', //FLash文件路径
'buttonText': '选择文件', //按钮文本
'method':'post', //请求方式
'uploader': "/upload", //处理文件上传Servlet
'auto': false, //true表示选择文件后自动上传
'multi': false, //是否支持多文件上传
'fileTypeDesc': '图片文件', //文件描述
'fileTypeExts': '*.png;', //上传的文件后缀过滤器
//上传成功后的回调函数
'onUploadSuccess' : function(file, data, response) {
alert(data); //此处仅仅是打印后台反馈的结果,实际中根据需要处理
}
});
function upload() {
$('#upload').uploadify('upload', '*')
}
</script>
(3)后台代码和传统方式一样
三、Servlet3.0实现文件上传
servlet3.0的开发者不再需要将Commons FileUpload 组件导入到他们的工程中去。处理上传文件的servlet只需用@MultipartConfig进行注解。
@WebServlet(urlPatterns = "/upload3")
@MultipartConfig
public class UploadServlet3 extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Part part = request.getPart("files");
InputStream is = part.getInputStream();
String path = request.getServletContext().getRealPath("/uploadFiles");
String filename = String.format("%s/%s",path,getFilename(part));
FileOutputStream fos = new FileOutputStream(new File(filename));
byte[] buf = new byte[1024];
while (is.read(buf) != -1) {
fos.write(buf);
}
fos.flush();
fos.close();
is.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
private String getFilename(Part part) {
String contentDispositionHeader = part.getHeader("content-disposition");
String[] elements = contentDispositionHeader.split(";");
for (String element : elements) {
if (element.trim().startsWith("filename")) {
return element.substring(element.indexOf('=') + 1).trim().replace("\"", "");
}
}
return null;
}
四、总结
uploadify、Servlet3.0并不是替代传统方式,而是对其进行简化和优化。uploadify简化和优化了前端,而Servlet3.0简化了后台代码。