Use the jQuery. form. js/springmvc framework to implement the file upload function. Set up the springmvc framework.

Source: Internet
Author: User

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

@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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.