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>
Java code (specific SPRINGMVC configuration, including file upload configuration reference http://www.jb51.net/article/84078.htm)
@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";
}
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" >
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 '}}
Here is actually the superfluous, in this case the request sent in detail as shown:
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
and user, front cannot add @requestbody.
The above content is small series to introduce the use of JQUERY.FORM.JS/SPRINGMVC framework to achieve file upload function, I hope to help everyone, if you want to know more wonderful content, please pay attention to cloud Habitat community website!
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
