ajax jsp显示图片,jsp+ajax+springMvc图片上传立刻回显 电商

jsp+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();

}