图片上传是网站开发中非常常用的一个功能，本文将详细描述在jfinal框架下如何实现图片上传功能。
首先我在实现图片上传功能时用到了uploadify插件，因此在开发时需要引入相应的文件，分别是uploadify.css、jquery-1.10.2.js、jquery.uploadify.min.js、uploadify.swf、uploadify-cancel.png。这些文件都可以在百度中找到，也可以点此下载，在我的项目中我把这些文件都保存在我在WebRoot文件夹下新建的JS文件夹和CSS文件夹下。
另外在jfinal框架下实现文件的上传需要用到cos-26Dec2008.jar包，该文件可以在jfinal提供的库中找到，也可以点此下载。然后将该jar包放入WEB-INF文件夹下的lib文件夹中，至此准备工作就完成了。
下面新建一个用于实现图片上传的jsp页面名为photo，其中代码如下。
<span style="font-size:18px;"><%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>上传图片</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/uploadify.css" />
</head>
<body>
<input id="file_upload" name="uploadfile" type="file" multiple="true">
<p id="upload_check"></p>
<div id="queue"></div>
<div id="show"></div>
<script src="JS/jquery-1.10.2.js" type="text/javascript"></script>
<script src="JS/jquery.uploadify.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#file_upload").uploadify({
'swf' : 'JS/uploadify.swf',//调用的swf文件的位置
'uploader' : 'upload',//指定文件上传后调用的方法
'method' : "post",
'buttonText' : '选择图片上传',//上传按钮的显示文本
'fileTypeExts' : '*.jpg;*.jpeg;*.gif;*.png;*.bmp;*.JPG;*.JPEG;*.GIF; *.PNG;*.BMP',//可上传的文件类型
'fileTypeDesc' : '只允许上传jpg,jpeg,gif,png,bmp文件。',//文件类型错误时的提示
'queueSizeLimit' : 1,//批量上传队列的大型，这里设为1即一次只可以上传一个文件
'fileSizeLimit' : 1024 * 1024 * 10,//上传文件的大小上限
'removeCompleted' : true,
'auto' : true,
'multi' : false,
'queueID' : 'queue',//上传队列上传进度的现实位置id
'onSelect' : function() {
$("#queue").children().each(function() {
$(this).css({
margin : '7px',
width : '70%'
});
});
},
'onUploadSuccess' : function(file, data,response) {//上传成功后的回调函数
$("#show").empty();
var json = $.parseJSON(data);
if (json.flag) {
var $img = $('<img id="target"/>');
$img.attr("src", "img/" + json.fileName);
$("#show").append($img);
}
else {
$("#upload_check").text(json.msg);
$("#upload_check").show();
setTimeout('$("#upload_check").hide()',
5000);
}
}
});
});
</script>
</body>
</html></span><span style="font-size:18px;">public void photo(){
render("photo.jsp");
}</span><span style="font-size:18px;"> public void upload(){
String fileName = "";
String extName = "";
boolean flag = false;
String msg = "";
try {
String path = getSession().getServletContext().getRealPath("/")
+ "img/";
List<UploadFile> uf = getFiles(path);
File file = uf.get(0).getFile();
fileName = file.getName();
extName = fileName.substring(fileName.lastIndexOf(".") + 1);
SimpleDateFormat dateFormat = new SimpleDateFormat(
"yyyyMMddHHmmss");
int temp = (int) (Math.random() * 9000 + 1000);
fileName = getRequest().getRemoteAddr().replaceAll(":", "")
+ dateFormat.format(new Date())
+ new Integer(temp).toString() + "." + extName;//对文件进行重命名，防治文件重名。命名的规则是使用上传客户端的ip+上传时间+四位随机数的方法。
file.renameTo(new File(path + fileName));
flag = true;
msg = "上传成功";
}
catch (Exception e) {
msg = "网络超时，请重试。";
}
JSONObject json = new JSONObject();
json.put("flag", flag);
json.put("msg", msg);
json.put("fileName", fileName);
renderJson(json);
}</span>这里有两点需要说明，第一是我在获取文件时使用的是getFiles这个方法，而不是getFile这个方法。这两个方法的区别是前者可以获取批量传输的文件，即当用户一次传输多个文件时需要用getFiles方法来所有文件进行获取，而getFile方法仅用于对单个文件的获取上。而在这里虽然我设置了一次只能获取一个文件，但是我还是用了getFiles这个方法，主要原因是因为我在尝试用getFile方法时始终都无法获取文件，其返回值永远为null，具体原因我到现在还没搞清楚，如果有人知道原因请一定告诉我。另一个要说明的是关于文件重命名的问题，这里我采用了通过文件上传方ip加上传时间加四位随机数的方法来实现对文件的重命名，主要是为了防止上传的文件因为重名而相互覆盖，但后来我发现在jfinal中已经内置了一套预防重名的机制，因此不对文件进行重命名也是可以的。
至此图片上传的功能已经实现了，下面进行调试。首先打开图片上传页面photo.jsp，其地址为http://localhost:8080/jfinal_tomcat/photo，打开后页面如下。
点击按钮选择需要上传的图片，如下图所示。
选择第一张图片点击“打开”按钮即完成了图片的上传，结果如下图所示。
简单的图片上传功能的实现就介绍到这里，当然在具体的使用中为了保持图片信息通常会结合数据库，将图片的存储位置保持在数据库中，从而实现对图片的动态调取。此外有时候出于对格式的统一需要实现对图片的裁剪，这里我推荐一个好用的裁剪插件Jcrop，但是在本文中我就不详细说明的。如果后面有时间我会对裁剪功能的实现在进行详细的说明，下一篇文章将介绍通过jfinal实现分页显示功能，但是因为最近工作比较忙更新时间不定，还望见谅。
