http://blog.csdn.net/cx19910829/article/details/77449104 这个也可以 参考下
工作第二天,要求做3个ajax小功能,后台代码已经给好了,在一个技术大牛的大哥指点下 ,终于把这个上传完成了(ps:我的前台基本很差)
功能:完成上传,即不用界面刷新即可得到上传图片,上传功能利用后台java代码上传,前台是jsp的,
先上干货吧,不多说了
前台代码:
解释下</span>这是一个隐藏域文件,
<div class="z-edit-data">//form表单设置,${SHOPDOMAIN}这个是公司的服务器地址
<form action="${SHOPDOMAIN}/publicinterface/getImgurlbyfile.html" id="upimg_form" enctype="multipart/form-data" method="post"> <input type="hidden" value="heaadpic" name="imgpath"> <img src="${SHOPDOMAIN}${ sessionFrontUser.picUrl}" class="z-photo" alt=""/> <a href="javascript:;" class="a-upload"> <input type="file" name="imgfile" id="imfile" style="position: absolute; right: 0; font-size: 100px; cursor: pointer; top: 0; z-index: 999; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);" id="upimg_file1" οnchange="upimg_click();"/> <span class="glyphicon glyphicon-search" aria-hidden="true"></span>上传 </a><br/><br/><br/> <input type="button" class="btn1" name="z-submit" id="z-submit" value="保存"/> </form>
ajax代码块
<script> //得到上传图片的地址 function upimg_click() { $("#upimg_form").ajaxSubmit( { success : function(data) { if ($.parseJSON(data).res_code == "0") { $(".z-photo").attr("src","${SHOPDOMAIN}/"+ $.parseJSON(data).filePath); $("#uploadimage").val($.parseJSON(data).filePath); //隐藏域图片 } } }); } //上传照片 function submitss() { var filepath = $("#uploadimage").val(); if(filepath==''){ showMessage("请先上传图片!"); }else{ $.ajax({ type : "post", url : "${SHOPDOMAIN}/updatetouxiang.html", dataType : "json", data : { "myfile" : filepath }, success : function(data) { if (data.res_code == "0") { showMessage("修改成功!"); } else { showMessage(data.message); } } }); } } </script>
后台代码:
@RequestMapping("/updatetouxiang") public void updatetouxiang(HttpServletResponse response, HttpServletRequest request, HttpSession session) { JSONObject json = new JSONObject(); User su = (User) session.getAttribute(SystemConfig.SESSION_FRONT_USER); MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; MultipartFile myfile = multipartRequest.getFile("myfile"); if (null != myfile && !myfile.isEmpty()) { String filePath = Tools.uploadpic(myfile, "uploadWebSite"); if (null != filePath) { su.setPicUrl(filePath); } } if (userService.updateByPrimaryKeySelective(su) > 0) { json.put("res_code", "0"); json.put("message", "success"); session.setAttribute(SystemConfig.SESSION_FRONT_USER, su); } else { json.put("res_code", "1"); json.put("message", "修改失败"); } try { responseAjax(json, response); } catch (UnsupportedEncodingException e) { // TODO Auto-generated catch block e.printStackTrace(); } } /** * 上传图片 * * @param myfile * @param picdir * @return */ public static String uploadpic(MultipartFile myfile, String picdir) { String saveUrl = "/attached/"; String originalFilename = myfile.getOriginalFilename(); Map<String, String> maps = KindeditorController.mkdir(saveUrl, picdir); String endName = originalFilename.substring(originalFilename.lastIndexOf("."), originalFilename.length()); String filename = UUID.randomUUID() + endName; if (endName.equals(".png") || endName.equals(".gif") || endName.equals(".jpg") || endName.equals(".jpeg")) { try { FileUtils.copyInputStreamToFile(myfile.getInputStream(), new File(maps.get("savePath"), filename)); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } return maps.get("saveUrl") + filename; }else if(endName.equals(".log")){ try { FileUtils.copyInputStreamToFile(myfile.getInputStream(), new File(maps.get("savePath"), originalFilename)); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } return null; }
完成,,最后大家有不明的可以给我回复,我收到会尽量帮助大家的。