ajax jsp 無刷新上傳文件

 

本文實現的文件上傳也是無頁面刷新的，可以說是一種"類似AJAX"方法

開始之前先說兩句無關的，其實在ajax出現之前，web應用也可以是無刷新的，那時大多通過IFrame來做到這一點。當然Ajax出現之後，人們一窩蜂地投奔Ajax 的陣營了，iFrame 就乏人問津了。但是用iFrame來實現無刷新上傳文件確實一個很好的選擇。

ps：Ajax技術基本上可以說是由google公司帶起來的，但少Gmail中上傳文件用的還是 IFrame，所以使用IFrame來上傳文件是最好的選擇。
我在這裡這裡用的技術是jsp，其實asp，php等也是一樣可以這麼實現的

 

html：

 

<script type="text/javascript">
function callback(msg)
{
document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;
document.getElementById("msg").innerHTML = ""+msg+"";
}
</script>

 

 

java 邏輯處理:

package com.partner.servlets;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

import com.partner.core.util.UploadConfigurationRead;

public class FileUploadServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

protected final transient Log log = LogFactory.getLog(FileUploadServlet.class);

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}

@SuppressWarnings("unchecked")
protected void doPost(HttpServletRequest request, HttpServletResponse response){
//文件存放的目錄
//File tempDirPath =new File(request.getSession().getServletContext().getRealPath("/")+File.separator+"uploads");
String path = UploadConfigurationRead.getInstance().getConfigItem("tempPath").trim();
File tempDirPath = new File(path);
if(!tempDirPath.exists()){
tempDirPath.mkdirs();
}
//創建磁盤文件工廠
DiskFileItemFactory fac = new DiskFileItemFactory();

//創建servlet文件上傳組件
ServletFileUpload upload = new ServletFileUpload(fac);

upload.setHeaderEncoding("UTF-8");
//文件列表
List fileList = null;
//解析request從而得到前台傳過來的文件
try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
ex.printStackTrace();
return;
}
//保存後的文件名
String imageName = null;
//便利從前台得到的文件列表
Iterator it = fileList.iterator();
while(it.hasNext()){
FileItem item = it.next();
//如果不是普通表單域，當做文件域來處理
BufferedInputStream in = null;
BufferedOutputStream out = null;
if(!item.isFormField()){
imageName = new Date().getTime()+"_"+item.getName();

try {
in = new BufferedInputStream(item.getInputStream());
out = new BufferedOutputStream(
new FileOutputStream(new File(tempDirPath+File.separator+imageName)));
Streams.copy(in, out, true);
} catch (IOException e) {
log.error("文件上傳異常:", e);
}finally{
if(in != null){
try {
in.close();
} catch (IOException e) {
log.error("上傳文件關閉輸入失敗",e);
}
}
if(out != null){
try {
out.close();
} catch (IOException e) {
log.error("上傳文件關閉輸出失敗",e);
}
}
}
}
}
PrintWriter out = null;
try {
out = encodehead(request, response);
} catch (IOException e) {
e.printStackTrace();
}
//這個地方不能少，否則前台得不到上傳的結果

out.write("<script>parent.callback('upload file success')</script>);
out.write(imageName);
out.close();
}

/**
* Ajax輔助方法 獲取 PrintWriter
* @return
* @throws IOException
* @throws IOException
* request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
*/
private PrintWriter encodehead(HttpServletRequest request,HttpServletResponse response) throws IOException{
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
return response.getWriter();
}
}