开发环境
tomcat8, eclipse+maven,dojo1.9
Maven项目
首先需要生成一个webapp的maven项目。本次开发用到了tomcat的servlet api, jsp api以及jstl，因此需要在pom.xml中声明所需的依赖。为了不超过字数上限，我只列出依赖的ID。
tomcat-servlet-api
tomcat-jsp-api
jstl我们将有两个servlet和一个JSP
index.jsp， 负责界面展示。对应的URL为http://localhost:8080/images
UploaderServlet, 负责处理dojo发送的AJAX图片上传请求,并返回JSON格式的消息。对应的URL为http://localhost:8080/images/ajaxUploader
ImagesServlet, 负责处理对上传后的图片访问请求。对应的URL为http://localhost:8080/images/*.png|jpg|gif?download=true|false
后端开发
web.xml
Servlet3可以使用annotation config，也可以使用传统的web.xml。我们还是用web.xml.
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<display-name>Archetype Created Web Application</display-name>
<context-param>
<!-- 定义上传图片最终存放的文件夹。 -->
<param-name>shareFolder</param-name>
<param-value>d:/share/data</param-value>
</context-param>
<servlet>
<servlet-name>imageUploader</servlet-name>
<servlet-class>servlets.UploaderServlet</servlet-class>
<multipart-config>
<!--临时存放上传文件的地方-->
<location>d:/share/tmp</location>
<!--允许上传的文件最大值,约10MB。默认值为 -1，表示没有限制。-->
<max-file-size>10240000</max-file-size>
<!--针对该 multipart/form-data 请求的最大数量，默认值为 -1，表示没有限制。-->
<max-request-size>20480000</max-request-size>
<!--当数据量大于约10MB时，内容将被写入tmp目录下的文件。-->
<file-size-threshold>10240000</file-size-threshold>
</multipart-config>
</servlet>
<servlet-mapping>
<servlet-name>imageUploader</servlet-name>
<url-pattern>/ajaxUploader</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>imageAccess</servlet-name>
<servlet-class>servlets.ImagesServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>imageAccess</servlet-name>
<url-pattern>*.png</url-pattern>
<url-pattern>*.jpg</url-pattern>
<url-pattern>*.gif</url-pattern>
</servlet-mapping>
</web-app>从上可见，所有的图片访问均由ImagesServlet处理，文件上传由UploaderServlet处理。UploaderServlet下面配置了文件上传的限制，请看注释。另外我还声明了一个context-param，作用请看注释。
UploaderServlet
使用request.getPart()方法，可以得到文件上传part的对象。将上传的流保存在指定的目录文件中。
特别注意的是，此servlet响应的将是dojo.io.iframe发送来的AJAX请求，因此，返回JSON格式的响应，将是最好的选择。
响应dojo.io.iframe的JSON格式，必须包含在下面的结构中。这是dojo.io.iframe所能解析的结构，也是必须遵循的规则, 响应的，response header必须设置为text/html。
<html>
<body>
JSON_DATA
</body>
</html>UploadServlet的部分代码如下：
public class UploaderServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
try {
Part image = req.getPart("image");
//servlet3.0.1新加入的方法，在3中，我们只能通过header来自己解析filename.
String imageName = image.getSubmittedFileName();
String shareFolder = req.getServletContext().getInitParameter("shareFolder");
File imageFile = new File(shareFolder, imageName);
FileOutputStream fos=null;
InputStream is =null;
try {
fos = new FileOutputStream(imageFile);
is = image.getInputStream();
byte[] bytes = new byte[4096];
int bytesReaded = -1;
while ((bytesReaded=is.read(bytes))!=-1) {
fos.write(bytes, 0, bytesReaded);
}
fos.flush();
} finally {
//关闭所有的流。
}
sendCreated(resp, imageName);
} catch (Exception e) {
e.printStackTrace();
sendError(resp);
return;
}
}
private void sendError(HttpServletResponse resp) {
resp.setStatus(200);
resp.setContentType("text/html;charset=UTF-8");
StringBuilder body = new StringBuilder()
.append("<html> ")
.append(" <boby> ")
.append(" <textarea> ")
.append(" {status:500, message:'Can't load your image.'} ")
.append(" </textarea> ")
.append(" </body> ")
.append("</html> ");
resp.setContentLength(body.length());
PrintWriter out;
try {
out = resp.getWriter();
out.print(body.toString());
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
private void sendCreated(HttpServletResponse resp, String image) {
resp.setStatus(200);
resp.setContentType("text/html;charset=UTF-8");
StringBuilder body = new StringBuilder()
.append("<html> ")
.append(" <boby> ")
.append(" <textarea> ")
.append(String.format("{status:201, image:'%s', message:'File created.'}", image))
.append(" </textarea> ")
.append(" </body> ")
.append("</html> ");
resp.setContentLength(body.length());
PrintWriter out;
try {
out = resp.getWriter();
out.print(body.toString());
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}ImagesServlet
处理图片访问请求的servlet。只需要将存放的文件以字节流的形式输出到response中即可。在输出流之前，我们还要检查If-Modified-Since和If-None-Match两个header。如果图片没有修改过，则返回304. 如果修改过，则输出流，并设置新的Last-Modified和ETag两个header。
public class ImagesServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response) {
String path = request.getRequestURI();
String imageName = path.substring(path.lastIndexOf('/')+1);
File image = new File(request.getServletContext().getInitParameter("shareFolder"), imageName);
if (!image.exists()) {
response.setStatus(404);
return;
}
long lastModified = image.lastModified();
long ifModifiedSince = request.getDateHeader("If-Modified-Since");
if ((lastModified / 1000 * 1000) <= ifModifiedSince) {
response.setStatus(304);
return;
}
response.setStatus(200);
String mimeType = request.getServletContext().getMimeType(imageName);
if(mimeType==null) {mimeType = "application/octet-stream";}
response.addHeader("content-type", mimeType);
response.setContentLength((int)image.length());
response.addDateHeader("Last-Modified", lastModified);
String isDownload = request.getParameter("download");
if (isDownload!=null&&"true".equals(isDownload)) {
//force download
String headerKey = "Content-Disposition";
String headerValue = String.format("attachment; filename=\"%s\"", imageName);
response.setHeader(headerKey, headerValue);
}
FileInputStream in=null;
ServletOutputStream out=null;
try {
in = new FileInputStream(image);
out = response.getOutputStream();
byte[] bytes = new byte[4096];
int bytesReaded = -1;
while ((bytesReaded = in.read(bytes))!=-1) {
out.write(bytes, 0, bytesReaded);
}
out.flush();
} catch (Exception e) {
e.printStackTrace();
response.setStatus(500);
} finally {
//关闭所有的流。
}
}
}前端开发
前端开发重要是对index.jsp的内容展示方面进行开发。作为网站的welcome页面，也是唯一的页面，它将承载所有的用户交互。在此页面上只包含两个功能：
图片上传Form。
已经上传的图片的展现。
index.jsp
使用dojo.io.iframe进行无刷新的图片上传。图片上传成功以后，会接受服务器返回的JSON对象，其中含有图片的信息。然后使用JS将图片插入到所有图片的前面。
当刷新本页面时，JSP会扫面图片文件夹。列出所有的图片，并将preview显示在页面上。我们可以点击download以下载图片，也可以点击view，使得浏览器直接打开图片。
以下是部分代码。
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dojo/io/iframe", "dojo/dom-construct","dojo/on","dojo/dom","dojo/query","dojo/string", "dojo/domReady!"],
function(ioIframe,domConst,on,dom,query,string){
var upload=function() {
ioIframe.send({
url:'${pageContext.request.contextPath }/ajaxUploader',
form:'uploader',
handleAs:'json',
load: function(response, ioArgs){
if (response.status == 201) {
var nodeHtml = <!--创建新image的preview的html-->
var node = domConst.toDom(nodeHtml);
domConst.place(node, 'icons', 'first');
} else {
alert(response.message);
}
return response;
},
// Callback on errors:
error: function(response, ioArgs){
alert(response);
return response;
}
});
};
on(dom.byId("uploadButton"), "click", upload);
});
</script>
<div>
<form enctype="multipart/form-data" id="uploader" method="post">
<div><label>Please select a image:</label><input type="file" name="image"/></div>
<div><input type="button" value="Upload" id="uploadButton"></div>
</form>
<div id="icons">
<%
String shareFolder = request.getServletContext().getInitParameter("shareFolder");
File dir = new File(shareFolder);
String[] list = dir.list();
pageContext.setAttribute("list", list);
%>
<c:forEach var="image" items="${list }">
<!--创建每个image的preview-->
</c:forEach>
</div>
</div>最终的UI效果
源代码下载地址
http://pan.baidu.com/s/1dDpDNhR
4185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
