The backend server receives the code for the file:
/*** Background upload file handling action*/@RequestMapping (Value= "/uploadfile", method=requestmethod.post) PublicvoidUploadFile (@RequestParam (value= "file", required=true) multipartfile file , httpservletresponse response){modelmap Modelmap= NewModelmap (); String Savepath= "d:\\tmp\\";//SavePath
Try{String fileName = File.getname ();File SaveFile= NewFile (Savepath); if(!savefile.exists ()) {Savefile.mkdirs (); } SaveFile =NewFile (Savepath, fileName); File.transferto (saveFile);Modelmap.addattribute ("Success",true); } Catch(Exception e) {Modelmap.addattribute ("Success",false); Modelmap.addattribute ("message", "Save failed:" +e.getmessage ()); } Jsonserializer Serializer= NewJsonserializer (); String result=serializer.serialize (MODELMAP); //extjsupload requires this method to implement the returnResponse.setcontenttype ("Text/html;charset=utf-8"); PrintWriter writer=Response.getwriter (); Writer.write (result); Writer.flush (); Writer.close (); }
Just started to return information using return Modelmap, but the foreground is not receiving data, finally look at the API after the use of PrintWriter to fix.
Attached to the front desk upload window code:
Uploadform =ext.extend (ext.window,{constructor:function (a) {Ext.applyif ( This, a); This. inituicomponents (); UploadForm.superclass.constructor.call ( This, {layout:' Fit ', modal:true,//Mask layer constrain:true, Width:500, Height:200, Title:‘Select the Upload file window‘, Items: This. Formpanel, Buttonalign:' Center ', keys: [{Key:Ext.EventObject.ENTER, scope: This, fn: This. UploadFile}], buttons: [{text:Save, Scope: This, Iconcls:"Btn-save", Handler: This. UploadFile},{Text:Cancel, Scope: This, Iconcls:"Btn-cancel", Handler:function () { This. Close (); } }] }); }, Inituicomponents:function () { This. Formpanel =NewExt.formpanel ({layout:' Form ', FileUpload:true, border:false, Method:' POST ', Enctype:' Multipart/form-data ', Bodystyle:' padding:10px 10px 0 10px; ', url: _ctx+ '/fuile/uploadfile.do ',defaults: {anchor:' 100% '}, LabelAlign:' Right ', items: [{xtype:' Hidden ', Name: ' UserId ', value: This. UserId}, Ext.Util.buildColumnForm (1, ' TextField ', {fieldlabel:' Memo Info ', Name:' Remark ', Allowblank:false, maxlength:100, Maxlengthtext:' Message length is less than or equal to 100 characters '}), {xtype:' Fileuploadfield ', ID:' Form_file ', Fieldlabel:' Script upload ', Name:' File ',//Background receive Emptytext:' Please upload Word document ', ButtonText:‘‘, regex:/\. (Doc|docx) $/, Regextext:"Please upload Word document", Buttoncfg: {iconcls:' Btn-upload-icon ' } } ] }); }, UploadFile : function () {var win= This;var formfile = ext.getcmp (' Form_file '). GetValue (); if( This. Formpanel.getform (). IsValid ()) { if(formfile== ") {Ext.Msg.alert ("Action tip:", "Please upload Word file and save"); return; } This. Formpanel.getform (). Submit ({Url:ctx+ '/file/uploadfile.do ', Waitmsg:' Saving ... ', Success:function (form, action) {var result=Ext.decode (action.response.responseText);Ext.Msg.alert (Result.message,"");Win.close (); }, Failure:function (form, action) {var result=Ext.decode (Action.response.responseText); Ext.Msg.alert ("Error Prompt", Result.message); } }); } }});
Calling Methods NewUploadform ({userId: ' 34567 '}). Show ();
ExtJS + Fileuploadfield upload file code