Layui image upload + form submission + Spring MVC

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

1. Front-end HTML:

<Divclass= "Layui-form-item">    <labelclass= "Layui-form-label">Change your avatar</label>    <Divclass= "Layui-input-inline uploadheadimage">        <Divclass= "Layui-upload-drag"ID= "Headimg">            <Iclass= "Layui-icon"></I>            <P>Click to upload an image, or drag a picture here</P>        </Div>    </Div>    <Divclass= "Layui-input-inline">        <Divclass= "Layui-upload-list">            <imgclass= "Layui-upload-img headimage"src= "Http://t.cn/RCzsdCq"ID= "Demo1">            <PID= "Demotext"></P>        </Div>    </Div></Div>

2. Front-end JS:

<script type= "Text/javascript" >Layui.use (["jquery", "Upload", "form", "layer", "element",function () {        var$ =layui.$, Element=layui.element, Layer=Layui.layer, Upload=layui.upload, Form=Layui.form; //drag and drop upload        varUploadinst =Upload.render ({elem:' #headImg ', URL:'/upload/headimg ', Size:500, before:function(obj) {//examples of pre-read files, not supported by IE8Obj.preview (function(index, file, result) {$ (' #demo1 '). attr (' src ', result);//Image Link (base64)                }); }, Done:function(res) {//if the upload fails                if(Res.code > 0) {                    returnLayer.msg (' Upload failed '); }                //Upload Successful                //print back to the address: put the address into a hidden input, and the table is submitted to the background of a single, slightly here .                /*Console.log (RES.DATA.SRC);*/window.parent.uploadHeadImage (RES.DATA.SRC); varDemotext = $ (' #demoText '); Demotext.html (' <span style= ' color: #8f8f8f; " > Upload Successful!!! </span> '); }, Error:function () {                //demonstrates a failed state and implements retransmission                varDemotext = $ (' #demoText '); Demotext.html (' <span style= ' color: #FF5722; " > Upload failed </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:

4. Backstage Springmvc Accept:

/*** Personal Information upload *@return{Result}*/@RequestMapping (Value= "/upload/headimg", method ={requestmethod.post}) @ResponseBody PublicObject headimg (@RequestParam (value= "file", required=false) multipartfile file, httpservletrequest request, httpservletresponse response)throwsException {if(Securityutils.getsubject (). IsAuthenticated () = =false) {        return"Redirect:/backend/login"; } String prefix=""; String Datestr=""; //Save uploadsOutputStream out=NULL; InputStream FileInput=NULL; Try{        if(file!=NULL) {String originalname=File.getoriginalfilename (); Prefix=originalname.substring (Originalname.lastindexof (".") +1); Datestr= Format.format (NewDate ()); String filepath= Request.getservletcontext (). Getrealpath ("/static") + Uploaddir + datestr + "." +prefix; FilePath= Filepath.replace ("\ \", "/"); File Files=NewFile (filepath); //Print view upload pathSystem.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=NewHashmap<>(); Map<String,Object> map=NewHashmap<>(); Map.put ("Code", 0); Map.put ("MSG", "" "); Map.put ("Data", MAP2); Map2.put ("src", "... /.. /.. /static "+uploaddir + datestr +". "+prefix); returnmap;}

5. For form requests, the normal use of Layui form upload is OK. Here is not written, too simple, my other blog has written, please go through, well, so ...

Layui image upload + form submission + Spring MVC