Layui upload is the most commonly used, indispensable, record the code, later copy can be used!!

<div class="layui-input-inline uploadHeadImage"> <div class=" Layui-input-inline uploadHeadImage" Class ="layui-upload-drag" id="headImg"> < I class="layui-icon"></ I > <p> </p> </div> <div class="layui-input-inline"> <div class="layui-upload-list"> <img class="layui-upload-img headImage" src="http://t.cn/RCzsdCq" id="demo1"> <p id="demoText"></p> </div> </div>

</div>

layui.use(["jquery", "upload", "form", "layer", "element"], function () { var $ = layui.$, element = layui.element, layer = layui.layer, upload = layui.upload, form = layui.form; Var uploadInst = upload. Render ({elem: '#headImg', url: '/upload/headImg', size: 500, before: Function (obj) {$(' #demo1 ').attr(' SRC ', result); $(' #demo1 ', result); // Image link (base64)}); }, done: function () {if (res.code > 0) {return layer. MSG (' failed to upload '); } // Upload successfully // print the address returned by the background: put the address in a hidden input and submit it to the background with the form. /* console.log(res.data.src); */ window.parent.uploadHeadImage(res.data.src); Var demoText = $(' # demoText '); DemoText. HTML (' < span style = "color: # 8 f8f8f;" > Upload successful!! < / span > '); Var demoText = $(' #demoText ');}, error: function () {var demoText = $(' #demoText '); DemoText. HTML (' < span style = "color: # FF5722;" </span> <a class="layui-btn layui-btn-mini demo-reload"> retry </a> '); Demotext.find ('.demo-reload ').on(' click ', function () {uploadinst.upload (); }); }}); element.init(); });

</script>

3. Page display:

SpringMVC: /**

  • Upload personal Information
  • @return {Result}

*/

@RequestMapping(value = “/upload/headImg”, method = {RequestMethod.POST})

@ResponseBody

public Object headImg(@RequestParam(value=”file”,required=false) MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws Exception {

if (SecurityUtils.getSubject().isAuthenticated() == false) { return "redirect:/backEnd/login"; } String prefix=""; String dateStr=""; OutputStream out = null; InputStream fileInput=null; try{ if(file! =null){ String originalName = file.getOriginalFilename(); prefix=originalName.substring(originalName.lastIndexOf(".")+1); dateStr = format.format(new Date()); String filepath = request.getServletContext().getRealPath("/static") + uploadDir + dateStr + "." + prefix; filepath = filepath.replace("\\", "/"); File files=new File(filepath); System.out.println(filepath); if(! files.getParentFile().exists()){ files.getParentFile().mkdirs(); } file.transferTo(files); } }catch (Exception e){ }finally{ try { if(out! =null){ out.close(); } if(fileInput! =null){ fileInput.close(); } } catch (IOException e) { } } Map<String,Object> map2=new HashMap<>(); Map<String,Object> map=new HashMap<>(); map.put("code",0); map.put("msg",""); map.put("data",map2); map2.put("src",".. /.. /.. /static"+uploadDir + dateStr + "." + prefix); return map;

}

5. As for form request, normal use of Layui form upload is ok.. I’m not going to write it here, it’s too easy, I have other blogs, please check it out, well, that’s it…….