Previous bootstrap custom file upload download style (http://www.jb51.net/article/85156.htm) has been for some time, has been considering how to submit a perfect logical processing function. Now I have to share my actual work with you.
The technology used has a jquery.form.js framework , as well as a SPRINGMVC framework . The main implementation of asynchronous file upload at the same time package objects, as well as some considerations.
The functionality itself is simple, but involves some passing parameter type problems. For example: The Ajax method of jquery and the parameters of the Ajaxsubmit method in Jquery.form.js, details will be shared in the next blog post.
Key: Three elements of HTML table: action= "Fileupload/fileupload" method= "post" enctype= "Multipart/form-data";
1. The simplest form of direct submission
HTML code:
<body> <form action= "Fileupload/fileupload" method= "post" enctype= "Multipart/form-data" > < Input type= "text" name= "password" > <input type= "file" name= "file" > <input type= "text" Name= " Username "> <input type=" Submit "value=" Submit "> </form> <button id=" button "> Submit </button> </body>
Java code
@Controller
@RequestMapping ("/fileupload") public
class FileUpload {
@RequestMapping ("/fileupload")
@ResponseBody public
String FileUpload1 (@RequestParam ("file") Multipartfile file/*, @RequestParam (" Username ") String username*/{
System.out.println ("-------------------------------"+ file.getsize ());
if (!file.isempty ()) {
System.out.println ("Process File:" +file.getoriginalfilename ());
try {
fileutils.copyinputstreamtofile (File.getinputstream (), New file ("C:\\temp\\imooc\\", System.currenttimemillis () + file.getoriginalfilename ());
} catch (IOException e) {
e.printstacktrace ();
}
}
return "NewFile";
}
Specific SPRINGMVC configuration, including file upload configuration as follows
Preparatory work:
The Jakarta Commons fileupload and Jakarta Commons IO packets need to be put in Lib.
The bags here are:
Commons-fileupload-1.1.1.jar
Commons-io-1.3.2.jar
then in the Spring-servlet.xml for multipartresolver configuration, do not configure the upload will not be good to use.
<bean id= "Multipartresolver" class= "Org.springframework.web.multipart.commons.CommonsMultipartResolver" > <property name= "maxuploadsize" ><value>100000</value></property> <property Name= "defaultencoding" ><value>UTF-8</value></property> </bean>
Next is the page:
Note the form and the file upload component.
<form action= "uploadposdetailfile.html" method= "post" enctype= "Multipart/form-data" > <div class= "Form" > <p> <span class= "req" ><input id= "Startdatetxt" name= "Startdatetxt" class= "field size4" title= "Enter the Date '/></span> <label>start Date: <span> (date format:mm/dd/yyyy,eg:01/01/2014) </span> </label> </p> <p> <span class= "req" ><input id= "Enddatetxt" name= "enddatetxt" class= "fi" Eld size4 "title=" Enter the date/></span> <label>end Date: <span> (date FORMAT:MM/DD/YYYY,EG:12/2 5/2014) </span></label> </p> <p> <span class= "req" ><input type= "file" Name= "Uploa Dfilectrl "class=" field size4 "title=" Choose the file/></span> <label>upload file: <span> (click b Rowse to choose) </span></label> </p> </div> <div class= "Buttons" > <input id= "Query Btn "type=" Submit "class=" button " Value= "Submit"/> </div> </form>
Then write the processing code in the controller, noting the corresponding relationship between the parameter and the page control:
@RequestMapping (value= "/uploadposdetailfile") public String Uploadposdetailfile (@RequestParam ("Startdatetxt") String startdatetxt, @RequestParam ("Enddatetxt") string enddatetxt, @RequestParam ("Uploadfilectrl") Multipartfi Le file,httpservletrequest request,httpservletresponse response) {try {System.out.println ("@@@@@@@@@1.startdatetxt=
"+startdatetxt);
System.out.println ("@@@@@@@@@2.enddatetxt=" +enddatetxt);
System.out.println ("@@@@@@@@@3.file=" +file.getoriginalfilename ())//Get the file name of uploaded files if (File.isempty () ==false) {
InputStream Is=file.getinputstream ();
InputStreamReader ISR = new InputStreamReader (IS);
BufferedReader br=new BufferedReader (ISR);
String s;
while ((S=br.readline ())!=null) {System.out.println (s);
} br.close ();
Isr.close ();
Is.close ();
Return to "/pages/posdetail/uploadposdetailresult/index.jsp";
catch (Exception e) {e.printstacktrace ();
Logger.error (e);
Request.setattribute ("Error", E.getclass ());Request.setattribute ("Reason", e.getmessage ());
Stacktraceelement[] Arr=e.getstacktrace ();
Request.setattribute ("Stacktraceelements", arr);
return "pages/error/index.jsp";
}
}
2. The Ajaxsubmit method using Jquery.form.js
HTML code and Java code remain unchanged, adding events to Id=button's buttons
$ ("#button"). Click (function () {
var hideform = $ (' form ');
var options = {
DataType: "JSON",
/*data: {' file ': $ ("input[type=file]"). Val (), "username": ' 123 ', Password: "12 3 "},*/
beforesubmit:function () {
alert (" uploading ");
},
success:function (result) {
alert (' Successful upload! ');
},
error:function (Result) {
}
};
Hideform.ajaxsubmit (options);
3. Use a User object in the background to receive username and password.
<form action= "Fileupload/fileupload" method= "post" enctype= "Multipart/form-data" > <input "File" Name= "File" > <input type= "Submit" value= "Submit" > </form>
It is possible that you will follow the steps below: encapsulate the form data as a JSON object and add data to the JS code above
data:{' file ': $ ("input[type=file]"). Val (), ' user ': {' username ': ' 123 ', Password: ' 123 '}}
In fact, this is the superfluous, in this case the request sent in detail as shown in the figure:
At this point the page will error 415.
----------------------------------------------------------------
The most reasonable code should be:HTML code is the same as 1, JS code and 2 the same, Java code
public String FileUpload1 (@RequestParam ("file") multipartfile file, user user) {
and user, front cannot add @requestbody.
For more highlights, please click on the "jquery Upload operation Summary" for in-depth study and research.
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
