另一台服务器
http://localhost:8088/image-web/upload/qwqwqwq.jpg
1:找开按钮是什么事件
2:异步提交ajax是怎么把图片上传到后台服务器的
3:配置Springmvc支持上传图片功能
4:搭建一个图片服务器
5:发送此图片到另一台服务器
6:将生成的http://localhost:8088/image-web/upload/sfdsfs.jpg
Url
path
返回到页面上
提交表单设置:
<form id="jvForm" action="brand/brand_add.do" method="post" enctype="multipart/form-data"> |
图片显示和选择:
<tr> <td width="20%"></td> <td width="80%"> <img width="100" height="100" id="imgUrl" src="${brand.imgUrl }" /> <input type="hidden" name="imgUrl" id="path" value="${brand.imgUrl }" /> <input type="file" onchange="uploadPic()" name="pic" /> </td> </tr> |
JQuery 异步提交:
//上传图片 function uploadPic(){ //定义参数 var options = { url : "upload/uploadPic.do", dataType : "json", type : "post", success : function(data){ //回调二个路径 //url //path $("#imgUrl").attr("src",data.url); $("#path").val(data.path); } }; //jquery.form使用方式 $("#jvForm").ajaxSubmit(options);
} |
Springmvc Controller
需要jar包:
//上传图片 @RequestMapping(value = "/upload/uploadPic.do") public void uploadPic(@RequestParam(required = false) MultipartFile pic,HttpServletResponse response){ //扩展名 String ext = FilenameUtils.getExtension(pic.getOriginalFilename());
//图片名称生成策略 DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS"); //图片名称一部分 String format = df.format(new Date()); //随机三位数 Random r = new Random(); // n 1000 0-999 99 for(int i=0 ; i<3 ;i++){ format += r.nextInt(10); }
//实例化一个Jersey Client client = new Client(); //保存数据库 String path = "upload/" + format + "." + ext;
//另一台服务器的请求路径是? String url = Constants.IMAGE_URL + path; //设置请求路径 WebResource resource = client.resource(url);
//发送开始 POST GET PUT try { resource.put(String.class, pic.getBytes()); } catch (IOException e) { e.printStackTrace(); }
//返回二个路径 JSONObject jo = new JSONObject(); jo.put("url", url); jo.put("path",path);
ResponseUtils.renderJson(response, jo.toString()); } |
还必须将Tomcat服务器修改为可读可写:
在Tomcat web.xml中添加: