关于ajax图片上传，上传是后台代码来完成的，利用ajaxSubmit来完

发布时间：2020-12-16 01:51:17 所属栏目：百科来源：网络整理

导读：工作第二天，要求做3个ajax小功能，后台代码已经给好了，在一个技术大牛的大哥指点下，终于把这个上传完成了（ps：我的前台基本很差）功能：完成上传,即不用界面刷新即可得到上传图片，上传功能利用后台java代码上传，前台是jsp的，先上干货吧，不多说了

工作第二天，要求做3个ajax小功能，后台代码已经给好了，在一个技术大牛的大哥指点下，终于把这个上传完成了（ps：我的前台基本很差）

功能：完成上传,即不用界面刷新即可得到上传图片，上传功能利用后台java代码上传，前台是jsp的，

先上干货吧，不多说了

前台代码：

<span style="font-size:14px;"><span style="background-color: rgb(0,204,204);"><span style="color:#CCCCFF;"><span style="color:#000000;"><span style="background-color: rgb(255,255);"><input type="hidden" value="" name="imgpath" id="uploadimage">//<span style="background-color: rgb(102,153);">解释下</span>这是一个隐藏域文件，
			<div class="z-edit-data">//form表单设置，</span></span></span></span></span><pre name="code" class="html"><span style="font-size:14px;"><span style="background-color: rgb(0,255);">${SHOPDOMAIN}这个是公司的服务器地址</span></span></span></span></span>

<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" onchange="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> </div> 后台代码： @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(),originalFilename)); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } return null; } 完成，，最后大家有不明的可以给我回复，我收到会尽量帮助大家的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!