圖片上傳是網站開發中非常常用的一個功能，本文將詳細描述在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實現分頁顯示功能，但是因爲最近工作比較忙更新時間不定，還望見諒。
