目标：Ajax實作異步上傳圖檔
要求：點選頁面浏覽按鈕後，選擇需要上傳的圖檔，頁面無重新整理，将上傳的圖檔展示出來
開發流程
一：在頁面編寫表單代碼和js代碼
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax異步上傳圖檔</title>
<-- 引入jQuery異步上傳js檔案 -->
<script src="/resource/jquery.form.js" type="text/javascript"></script>
<!-- Ajax異步上傳圖檔 -->
<script type="text/javascript">
function uploadPic() {
// 上傳設定
var options = {
// 規定把請求發送到那個URL
url: "/upload/uploadPic.do",
// 請求方式
type: "post",
// 伺服器響應的資料類型
dataType: "json",
// 請求成功時執行的回調函數
success: function(data, status, xhr) {
// 圖檔顯示位址
$("#allUrl").attr("src", data.path);
}
};
$("#jvForm").ajaxSubmit(options);
}
</script>
</head>
<body>
<form id="jvForm" action="o_save.shtml" method="post" enctype="multipart/form-data">
<table>
<tbody>
<tr>
<td width="20%">
<span>*</span>
上傳圖檔(90x150尺寸):</td>
<td width="80%">
注:該尺寸圖檔必須為90x150。
</td>
</tr>
<tr>
<td width="20%"></td>
<td width="80%">
<img width="100" height="100" id="allUrl"/>
<!-- 在選擇圖檔的時候添加事件，觸發Ajax異步上傳 -->
<input name="pic" type="file" onchange="uploadPic()"/>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
實作步驟：
1.編寫form表單input類型為file
2.為頁面儲存按鈕添加onchange事件
3.編寫js代碼，使用jQuery送出form表單（jQuery.form.js檔案，可以自動模拟出一個form表單），請求路徑
4.頁面編寫暫時到這裡
二：在背景實作圖檔的上傳
這裡使用的是springmvc（注解開發）圖檔上傳
package com.wanghang.upload;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
/**
* Ajax異步上傳圖檔
*
* @author Hang.W
* @version 1.0, 2017-02-14 00:51:39
*/
@Controller
public class UploadController {
/**
* 使用Ajax異步上傳圖檔
*
* @param pic 封裝圖檔對象
* @param request
* @param response
* @throws IOException
* @throws IllegalStateException
*/
@RequestMapping("/upload/uploadPic.do")
public void uploadPic(MultipartFile pic, HttpServletRequest request, HttpServletResponse response) throws IllegalStateException, IOException {
try {
// 擷取圖檔原始檔案名
String originalFilename = pic.getOriginalFilename();
System.out.println(originalFilename);
// 檔案名使用目前時間
String name = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
// 擷取上傳圖檔的擴充名(jpg/png/...)
String extension = FilenameUtils.getExtension(originalFilename);
// 圖檔上傳的相對路徑（因為相對路徑放到頁面上就可以顯示圖檔）
String path = "/upload/" + name + "." + extension;
// 圖檔上傳的絕對路徑
String url = request.getSession().getServletContext().getRealPath("") + path;
File dir = new File(url);
if(!dir.exists()) {
dir.mkdirs();
}
// 上傳圖檔
pic.transferTo(new File(url));
// 将相對路徑寫回（json格式）
JSONObject jsonObject = new JSONObject();
// 将圖檔上傳到本地
jsonObject.put("path", path);
// 設定響應資料的類型json
response.setContentType("application/json; charset=utf-8");
// 寫回
response.getWriter().write(jsonObject.toString());
} catch (Exception e) {
throw new RuntimeException("伺服器繁忙，上傳圖檔失敗");
}
}
}
圖檔上傳
1.springmvc進行參數綁定，但預設是不支援圖檔上傳的，可以在springmvc的配置檔案中進行檔案上傳的配置
2.設定pic形參，接收頁面傳遞的參數
3.普通檔案上傳代碼
4.将圖檔以json格式寫回頁面
5.圖檔上傳部分完成
頁面圖檔展示
1.使用jQuery動态擷取到<img>标簽的id
2.将擷取到的json資料指派到<img>标簽的src屬性
3.指派完後，就完成了圖檔頁面無重新整理顯示
![為JSON 資料加入斜杠 \[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)