Home > Developer > JavaScript
Use the jQuery. form. js/springmvc framework to implement the file upload function. Set up the springmvc framework.
The technologies used include the jquery. form. js framework and springmvc framework. It mainly implements the encapsulation of objects while uploading asynchronous files, as well as some precautions.
The function itself is very simple, but it involves some issues about passing parameter types. For example, the ajax method of jquery and the parameters of the ajaxSubmit method in jquery. form. js will be shared in the next blog.
Key: html table three elements: action = "fileUpload/fileUpload" method = "post" enctype = "multipart/form-data ";
1. The simplest form for 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 (Specific springmvc configuration, including File Upload configuration reference http://www.bkjia.com/article/84078.htm)
@Controller@RequestMapping("/fileUpload")public class FileUpload {@RequestMapping("/fileUpload")@ResponseBodypublic 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. Use the ajaxSubmit method of jquery. form. js
The html code and java code remain unchanged. Add an event to the id = button.
$ ("# Button "). click (function () {var hideForm = $ ('form'); var options = {dataType: "json",/* data: {'file ': $ ("input [type = file]"). val (), "username": '000000', password: "123"}, */beforeSubmit: function () {alert ("uploading");}, success: function (result) {alert ('uploaded successfully! ') ;}, 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 type="file" name="file"><input type="submit" value="submit"></form>
You may follow the steps below to encapsulate form data as a json object and add data to the preceding js Code.
data:{'file': $("input[type=file]").val(), 'user':{"username": '123', password: "123"}}
The details of the request sent in this case are actually superfluous.
In this case, Error 415 is reported.
--------------------------------------------------------------
The most reasonable code should be: html code is the same as 1, js Code is the same as 2, java code
public String FileUpload1(@RequestParam("file")MultipartFile file, User user){
In addition, you cannot add @ RequestBody ..
The above content is a small series to introduce you to the use of jQuery. form. the js/springmvc framework implements the file upload function, hoping to help you. If you want to learn more exciting content, please stay tuned to the help House 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
