Ajax實現異步上傳圖片

要求：點擊頁面瀏覽按鈕后，選擇需要上傳的圖片，頁面無刷新，將上傳的圖片展示出來

開發流程

一：在頁面編寫表單代碼和js代碼

 

</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.賦值完后，就完成了圖片頁面無刷新顯示

 

 

　　　　　　來源：http://blog.csdn.net/java__project/article/details/55062816