本文為原創，轉載請注明：http://www.pm-road.com/index.php/2014/07/31/50
很多網站在上傳頭像或照片的時候，都會有一個預覽功能，結合自身體驗將該功能實現一下；要求：圖片保存到數據庫點擊查看實現ajax上傳圖片即時預覽另一種方法（簡單方法）
之前，我在做項目的時候，有一個功能就是要求上傳的圖片要即時顯示，很多網站都會有這樣的案例，其中的代碼邏輯大多為把圖片傳到服務器上之后，返回圖片的 物理路徑，不過，我們當時使用的框架為ExtJS 4.1,而且因為涉及一些安全原因，圖片在上傳過程中，服務器上不能出現任何明文，所以在當時做項目的過程中，所有的數據包括文本文件、圖片等一律保存到 了Oracle中。接下來開始把此功能梳理一下。
實現邏輯：
1：首先，要實現ajax上傳文件的功能；
2：將上傳的文件保存至數據庫中；
3：ajax返回一個UUID，至前台；
4：前台拿到此UUID后，重新發送圖片請求，將數據庫中的的字節數據取出，生成圖片；
實現方法：
1：因為ajax屬於異步請求，要想答到ajax可以上傳文件的目的，還需要下載 jquery 的插件 ajaxfileupload.js文件（點擊下載）；該js的原理是在上傳文件的同時，自動生成一個iframe對象，里面有一個form表單，通過該form表單進行上傳文件的功能；
2：后台拿到文件后，通過流的方式，保存至oracle數據庫，保存的同時生成一個UUID,該UUID做為保存至數據庫中的主鍵；
3：將該UUID返回到前台；
4：在ajax中，拿到返回的UUID，然后新建一個image html dom document對象,將其中的屬性src通過UUID指向該圖片的url,即可。
注意：網上好多教程，是把圖片的路徑以物理形式返回，即類似於src = “http://wwww.pm-road.com/upload/X.pic” ,此種做法是把圖片以物理方式存到了服務器上，我這里是把圖片存到數據庫里面，存儲的並非是圖片的路徑，而是圖片的字節碼。
以下是部分代碼：
至於ajaxfileupload.js如何上傳文件到服務器，這里不做過多的代碼，網上有很多；
當服務器收到該文件后：
=====后台保存文件到數據庫的代碼（如果上傳的圖片不是保存到數據庫，下面的代碼可以以忽略）================
File uploadFile = new File();//這里這個uploadFile 就是上傳的文件，這里不寫路徑什么的了。
InputStream is = new FileInputStream(uploadFile);
//blob類型是oracle中自帶的一個文件處理類型，其中的session 是hibernate中的
//session,而非是瀏覽器創建的request、session對象；
//所以此環境是在hibernate中完成；
Blob blob = session.getLobHelper().createBlob(is,0);
//FileDemo 是你自己的一個實體類，該實體類主要用於hibernate的映射關系。
FileDemo demo = new FileDemo();
//該實體類中一個屬性，該屬性就是Oracle的Blob類型
demo.setFileBlob(blob);
//生成一個隨機ID,用於查詢該對象
String random = UUID.randomUUID().toString();
demo.setId(random);
//執行hibernate中session的save()方法 ，將該對象保存至數據庫；
session.save(demo);
//流用完之后，一定要關閉
is.close();
=====================通過UUID請求數據庫中的圖片====================================
//前台收到uuid后，再返回給后台
String uuid = request.getParameter(“uuid”);
//通過hibernate 查詢已保存的圖片
FileDemo image = session.get(uuid);
//將查詢出來的BLob轉換成inputstream
InputStream is = image.getFileBlob().getBinaryStream();
ServletOutPutStream os = response.getOutPutStream();
byte[] _b = new byte[1024];
int temp = 0;
while((temp = is.read(_b)>0){
os.write(_b,0,temp);
}
is.close();
if(os != null){
os.close()
}
//將代碼這樣處理之后，就可以，前台就能自動生成圖片，不用其它處理
=================文件上傳之后，前台拿到UUID后，處理方法 ======================
var uuid = ajaxa得到的uuid;
//使用js 聲明一個img dom對象；
var image = “<img src=‘downloadPic.action?uuid=uuid’ />”;
//要即時顯示圖片的div id,將div中的html 賦值為image對象；就可以自動顯示出來
$(“#divid”).html(image);