webuploader上传图片
官网下载地址：http://fex.baidu.com/webuploader/
1.将文件夹修改成名字为webuploader 直接放在WebContent下
2.将examples/image-upload/index.html 复制一份到WebContent下并修改文件中引用的css/js的资源路径
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>WebUploader演示</title>
<link rel="stylesheet" type="text/css" href="webuploader/css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="webuploader/examples/image-upload/style.css" />
</head>
<body>
<div id="wrapper">
<div id="container">
<!--头部，相册选择和格式选择-->
<div id="uploader">
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
<p>或将照片拖到这里，单次最多可选300张</p>
</div>
</div>
<div class="statusBar" style="display:none;">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
</div><div class="info"></div>
<div class="btns">
<div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="webuploader/examples/image-upload/jquery.js"></script>
<script type="text/javascript" src="webuploader/dist/webuploader.js"></script>
<script type="text/javascript" src="webuploader/examples/image-upload/upload.js"></script>
</body>
</html>3.在upload.js中修改文件上传的路径
4.编写后台代码
本文以servlet为例，代码如下：
package com.lq.webUploader;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
@WebServlet("/upload")
public class UploadServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 设置文件上传路径 D:/apache-tomcat-6.0.35/webapps/upload/WEB-INF/upload
String savePath = this.getServletContext().getRealPath("/WEB-INF/upload");
File file = new File(savePath);
// 判断上传文件的保存目录是否存在
if (!file.exists()) {
// 创建目录
file.mkdir();
}
// 消息提示
String message = "";
try {
// 使用Apache文件上传组件处理文件上传步骤：
// 1、创建一个DiskFileItemFactory工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
// 2、创建一个文件上传解析器
ServletFileUpload upload = new ServletFileUpload(factory);
// 解决上传文件名的中文乱码
upload.setHeaderEncoding("UTF-8");
// 3、 检测是否为多媒体上传
if (!ServletFileUpload.isMultipartContent(request)) {
// 按照传统方式获取数据
return;
}
// 4、使用ServletFileUpload解析器解析上传数据，解析结果返回的是一个List<FileItem>集合，
//每一个FileItem对应一个Form表单的输入项
List<FileItem> list = upload.parseRequest(request);
for (FileItem item : list) {
// 如果fileitem中封装的是普通输入项的数据
if (item.isFormField()) {
String name = item.getFieldName();
// 解决普通输入项的数据的中文乱码问题
String value = item.getString("UTF-8");
//System.out.println(name + "=" + value);
} else {
// 如果fileitem中封装的是上传文件得到上传的文件名称，
String filename = item.getName();
if (filename == null || filename.trim().equals("")) {
continue;
}
filename = filename.substring(filename.lastIndexOf("\\") + 1);
// 创建一个文件输出流
FileOutputStream out = new FileOutputStream(savePath + "\\"+ filename);
// 获取item中的上传文件的输入流
InputStream in = item.getInputStream();
// 创建一个缓冲区
byte buffer[] = new byte[1024];
// 判断输入流中的数据是否已经读完的标识
int len = 0;
// 循环将输入流读入到缓冲区当中，(len=in.read(buffer))>0就表示in里面还有数据
while ((len = in.read(buffer)) > 0) {
out.write(buffer, 0, len);
}
// 关闭输入流
in.close();
// 关闭输出流
out.close();
message = "文件上传成功！";
response.setCharacterEncoding("utf-8");
response.getWriter().write(message);
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}5.测试