j2ee html5,HTML5+J2EE实现文件异步上传
P.S. HTML5經過了W3C的8年努力，終于正式推廣了。這次升級最大的就是升級了XMLHTTPRequest，讓它變成了XMLHTTPRequest Level II(這有啥奇怪的？)。這個對象現在非常強大，可能會讓所有使用jQuery的人全部重新拾起HTML原生的ajax技術。
閑話扯到這，接著是主題：我們今天要實現的就是下面的效果：
這里面文件名、文件大小和MIME都是在選擇文件時讀取和現實，然后點擊上傳之后，上傳進度實時顯示，最后彈出右邊的對話框確認文件信息(當然這里我為了方便直接把文件信息壓到POST請求里面了，否則可能亂碼，你也可以試試服務器端直接讀取)。
接著，看到了這個強大的效果，我們簡單地分析以下思路。
1、我們首先確定實現方式：Javascript將會顯示在客戶端顯示進度(用的是XMLHTTPRequest Level II的幾個新的Event)，然后同時上傳文件信息和文件本身，當然是異步的。
2、服務器端用一個servlet就行，這里使用commonfileupload接受上傳。
然后看一下新的XMLHTTPRequest Level II，看看如何監視這一過程。
選擇文件這里看到了一個onchange事件，這不是一個新事件，但在HTML5標準中被重新定義了，被用于文件被選擇的時候調用。
function fileSelected() { //文件選擇更改時調用的事件
var file = document.getElementById(‘fileToUpload‘).files[0]; //獲得文件上傳信息
if (file) { //如果用戶選擇了文件(沒有選擇的話，file就是null或是undefined，這樣可以判斷)
var fileSize = 0; //文件大小
if (file.size > 1024 * 1024) //如果文件大小大于1MB
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100)
.toString()+ ‘MB‘; //轉換文件大小并以MB單位顯示
else
//否則
fileSize= (Math.round(file.size * 100 / 1024) / 100).toString()+ ‘KB‘; //否則用KB單位顯示
document.getElementById(‘fileName‘).innerHTML = ‘ ‘ + file.name; //顯示文件名信息
document.getElementById(‘fileSize‘).innerHTML = ‘ ‘ + fileSize; //顯示文件大小信息
document.getElementById(‘fileType‘).innerHTML = ‘ ‘ + file.type; //顯示文件MIME信息
}
}
這個注釋不是我加的，我也不清楚是誰加的……但是大家應該能看懂了。
function uploadFile() { //點擊上傳按鈕時的時間
var fd = new FormData(); //FormData是Html5的新增類
fd.append("file", document.getElementById(‘fileToUpload‘).files[0]); //向表單數據添加文件主體
var file = document.getElementById(‘fileToUpload‘).files[0]; //獲得文件主體
var xhr = new XMLHttpRequest(); //初始化ajax請求
xhr.upload.addEventListener("progress", uploadProgress, false); //HTML5的新的事件，上傳進度改變時，只能在有文件上傳的情況下調用
xhr.addEventListener("load", uploadComplete, false); //老事件，上傳完成后
xhr.addEventListener("error", uploadFailed, false); //出錯時
xhr.addEventListener("abort", uploadCanceled, false); //中斷時
var caption=document.getElementById("caption").value; //標題(和文件上傳無關緊要)
fd.append("filename", file.name); //文件名添加到表單數據
fd.append("filesize", file.size); //文件尺寸添加到表單數據
fd.append("filetype", file.type); //MIME添加到表單數據
fd.append("caption", caption); //標題添加到表單數據
xhr.open("POST", "FileUpload",true); //準備上傳
//xhr.setRequestHeader("Content-Type", "multipart/form-data"); //這句千萬不能有！！！我也不知道為什么……
xhr.send(fd); //發出請求
}
點擊上傳按鈕之后就是這段代碼，FormData也是新加的對象，用于存儲表單數據(某人加的注視應該夠明白了……)。
接著我們看后臺，后臺使用commonfileupload接收(貌似說過了……)，先把代碼貼出來：
packageUpload;importjava.io.File;importjava.io.IOException;importjava.io.PrintWriter;importjava.util.Iterator;importjava.util.List;importjavax.servlet.ServletContext;importjavax.servlet.ServletException;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importorg.apache.commons.fileupload.FileItem;importorg.apache.commons.fileupload.FileItemFactory;importorg.apache.commons.fileupload.FileUploadException;importorg.apache.commons.fileupload.disk.DiskFileItemFactory;importorg.apache.commons.fileupload.servlet.ServletFileUpload;importLog.LogManager;public class FileUpload extendsHttpServlet {/*** Constructor of the object.*/
publicFileUpload() {super();
}/*** Destruction of the servlet.
*/
public voiddestroy() {super.destroy(); //Just puts "destroy" string in log//Put your code here
}/*** The doPost method of the servlet.
*
* This method is called when a form has its tag value method equals to post.
*
*@paramrequest the request send by the client to the server
*@paramresponse the response send by the server to the client
*@throwsServletException if an error occurred
*@throwsIOException if an error occurred*/
public voiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {try{
request.setCharacterEncoding("UTF-8");
DiskFileItemFactory fif=newDiskFileItemFactory();
fif.setSizeThreshold(1024*1024);
ServletFileUpload sfu=newServletFileUpload(fif);
sfu.setSizeMax(1024*1024*1024);
List items=null;try{
items=sfu.parseRequest(request);
}catch(FileUploadException e) {//TODO Auto-generated catch block
e.printStackTrace();
}
Iterator iter=items.iterator();
String filename="";
String filesize="";
String filetype="";
String caption="";
FileItem fi=null;while(iter.hasNext()) {
FileItem item=(FileItem) iter.next();if(item.isFormField()) {
String name=item.getFieldName();if(name.equals("filename")==true){
filename=item.getString("UTF-8");
}else if(name.equals("filesize")==true){
filesize=item.getString("UTF-8");
}else if(name.equals("filetype")==true){
filetype=item.getString("UTF-8");
}else if(name.equals("caption")==true){
caption=item.getString("UTF-8");
}
}else{
fi=item;
}
}
ServletContext application=getServletContext();
String path=(String) application.getAttribute("datapath")+"uploadpath"+application.getAttribute("systempi")+filename;
File f1=newFile(path);try{
fi.write(f1);
}catch(Exception e) {//TODO Auto-generated catch block
e.printStackTrace();
}
response.setContentType("text/html; charset=UTF-8");
PrintWriter out=response.getWriter();
out.println("你上傳了一個文件到服務器，下面將核實這些信息：");
out.println("1、文件名："+filename);
out.println("2、文件大小："+filesize);
out.println("3、文件MIME類型："+filetype);
out.println("如果信息全部正確，說明文件成功上傳了！");
String sqls1="";
LogManager.log("一個文件上傳請求已經被受理！文件存儲于："+path);
out.flush();
out.close();
}catch(Exception e) {
LogManager.err(e.toString());
}
}/*** Initialization of the servlet.
*
*@throwsServletException if an error occurs*/
public void init() throwsServletException {//Put your code here
}
}
還挺簡單的，對嗎？處理HTML5的上傳請求和處理以前版本的上傳請求基本一樣，唯一需要注意的是：原來是你來拼接請求，所以說，位置由你決定，現在FormData拼接請求的字符串中項目的順序和append的順序有關，所以別搞錯了(貌似我就搞錯了，先添加了文件，然后在后臺補救了一下……)。
基本上就這些代碼，然后就是添加文件信息到數據庫什么的，具體上傳步驟查查commonfileupload的api好了。
整個項目不方便讓大家下載，但這是一個OJ項目里面的，有興趣的關注一下進入項目的git。另外如果轉載的話，注明一下，謝謝！
原文：http://www.cnblogs.com/zhangyutong926/p/4194726.html
總結
以上是生活随笔為你收集整理的j2ee html5,HTML5+J2EE实现文件异步上传的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html传递guid参数,C#中的Gui
- 下一篇： HTML5 中的canvas元素用于,H