ajax圖檔上傳及時回顯,jsp+ajax+springMvc圖檔上傳立刻回顯 電商

思路：onchange()事件觸發異步請求，js将成功後傳回圖檔的位址動态寫入

JSP頁面：  外層一個ID為myForm的表單

*上傳産品圖檔(XX尺寸)：注:該尺寸圖檔必須為90x150。

請上傳圖檔的大小不超過3MB

JS函數

function submitImgSize1Upload() {

var option = {

url:"${path}/upload/upload.do",//使用ajax的方式送出表單，url以option中為準

type:'post',

dataType:"text",//不要寫成dateType

data:{

fileName:'imgSize1File'

},

success:function(responseText){

//把字元串解析成json對象

var obj = $.parseJSON(responseText);

$("#imgSize1ImgSrc").attr("src", obj.realPath);

$("#imgSize1").val(obj.relativePath);

},

error:function(){

alert("系統錯誤");

}

};

$("#myForm").ajaxSubmit(option);

}

控制層：

import com.sun.jersey.api.client.Client;

import com.sun.jersey.api.client.WebResource;

@RequestMapping("/upload.do")

public void upload(String fileName, HttpServletRequest request, PrintWriter out){

MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;

CommonsMultipartFile cfile = (CommonsMultipartFile) mr.getFile(fileName);

byte[] fbyte = cfile.getBytes();

String imageName = "";

SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmssSSS");

imageName = format.format(new Date());

Random random = new Random();

for(int i =0; i < 3; i++){

imageName = imageName + random.nextInt(10);

}

String raginalFileName = cfile.getOriginalFilename();

String suffixName = raginalFileName.substring(raginalFileName.lastIndexOf("."));

//建立用戶端

Client client = Client.create();

//圖檔在圖檔伺服器上的絕對路徑

String imagePath = EcpsConstants.UPLOAD_PATH+"/upload/"+imageName+suffixName;

WebResource resource = client.resource(imagePath);

//把圖檔放到圖檔伺服器上

resource.put(String.class, fbyte);

String result = "{\"realPath\":\""+imagePath+"\", \"relativePath\":\""+"/upload/"+imageName+suffixName+"\"}";

out.write(result);

out.close();

}

原文：http://blog.csdn.net/ojackhao/article/details/45190049