Ajax實現異步上傳圖片
要求：點擊頁面瀏覽按鈕後，選擇需要上傳的圖片，頁面無刷新，將上傳的圖片展示出來
開發流程
一：在頁面編寫表單代碼和js代碼
[html] view plain copy <%@ 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">
<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（註解開發）圖片上傳
[java] view plain copy- 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.賦值完後，就完成了圖片頁面無刷新顯示
來源：http://blog.csdn.net/java__project/article/details/55062816
Ajax實現異步上傳圖片