Custom front-end file uploads

Show section

1 <formstyle= "Display:none;"ID= "Form-upload"Method= "POST"enctype= "Multipart/form-data"Action= "/test/upload">2     <inputtype= "hidden"name= "id"value= "123">3     <inputtype= "File"name= "File">4 </form>5 <Buttonclass= "Btn-upload"ID= "Btn-upload" >Upload</Button>

JS Event Binding

1<script type= "Text/javascript" >2(function(){3     //Hijack upload button Click event to do the purpose of file upload customization4     varObjbtnfileupload = $ ("#form-upload"). Find ("input[type= ' file ']");5$ ("Btn-upload"). Click (function(){6Objbtnfileupload.trigger ("click");7     });8     //file upload completed, input[type= ' file ' changed, trigger upload9Objbtnfileupload.change (function() {Ten             varSelf = $ ( This); One             varform = self.parent ("form"); A             varFormData =NewFormData (Form[0]);//getting a value in this way does not trigger a page jump - $.ajax ({ -Type:form.attr (' method ')), theUrl:form.attr (' action ')), - Data:formdata, -MimeType:form.attr (' Enctype '), -ContentType:false, +Cache:false, -ProcessData:false +}). Success (function(ret) { A Console.log (ret); atAlert ("Upload succeeded"); -}). Fail (function(JQXHR, Textstatus, Errorthrown) { -                 //error Message - Console.log (JQXHR); -Alert ("Upload failed! "); -             }); in         }); -     } to })(); +</script>

Background processing

/***/= "/test/upload", method = requestmethod.post) @ResponseBody  public String Addfillform (@RequestParam ("file") multipartfile file,httpservletrequest request) {    = Request.getparameter ("id"); // additional form parameters can be received    in this way byte [] BFile = file.getbytes ();     = file.getname ();     // Business logic    return "Upload Success";}

Custom front-end file uploads