how to upload a file with springMVC restful service and jQuery

Question

I am developing an application with springMVC restful service as backend service and jQuery as front-end tech.

Now I have a requirement that files need to be uploaded by webservice to the server. I have no idea on how to write such a file uploading function. How should I send the file to the server by jQuery?

Thanks in advance.

possible duplicate of [How can I upload files asynchronously with jQuery?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) — Neil McGuigan, Jul 14 '14 at 02:16
see http://stackoverflow.com/questions/22312232/spring-data-rest-jpa-insert-lob-field/22333539#22333539 as well. — Neil McGuigan, Jul 14 '14 at 02:20
@NeilMcGuigan Thanks, you know i use springMVC restful service as backend componenet...How can I process such a file uploading request in springMVC service? — Chuck, Jul 14 '14 at 06:47

score 1 · Answer 1 · answered Jul 14 '14 at 07:02

I'm not sure what you are asking for, this is what i got from you

controller code like this

map.put("a", "/Student_Photos/sample.jpg");

in jsp write your stuff and include this

<form:form modelAttribute="uploadItem" action="add" name="student"
                method="post" enctype="multipart/form-data"
                onSubmit="return validate();">

              <td width="152"  rowspan="4"  ><img id="blah"
                        src="<c:url value="${a}"/>" alt="your image" width="130"
                        height="110" />

                    <form:input path="fileData" id="image" type="file"
                            onchange="readURL(this)" /></td>
              </form:form>

Actually what i ask for is how to write a file uploading function by jQuery and springMVC — Chuck, Jul 14 '14 at 07:13

Neil McGuigan · Accepted Answer · 2014-07-14T15:27:55.943

There are two main ways to do it in the browser:

For modern browsers, use the HTML5 File API. See https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
If you need to support old browser, you POST the file to a hidden iFrame. See http://viralpatel.net/blogs/ajax-style-file-uploading-using-hidden-iframe/

On the server side, I am going to assume you are using Spring Data REST (SDR) for your REST servlet. SDR doesn't do file uploads, but you can run SDR along with a regular Spring MVC Dispatcher Servlet in the same servlet.

The handler method in your MVC Dispatcher's FileController would look something like this, if saving to database:

@RequestMapping(value = "/files", method = RequestMethod.POST)
@ResponseStatus(HttpStatus.CREATED)
@ResponseBody
List<FileEntity> upload(@RequestParam("file") MultipartFile[] multipartFiles) throws Exception {

    List<FileEntity> response = new ArrayList<FileEntity>();

    for (MultipartFile multipartFile : multipartFiles) {

        FileEntity f = new FileEntity(multipartFile.getBytes(), multipartFile.getContentType(), multipartFile.getOriginalFilename());

        fileRepository.save(f);

        response.add(f);

    }

    return response;

}

You want SDR, Apache Commons FileUpload and IO on your classpath (or use the newer Servlet 3 API instead of Apache Commons). Add them as maven dependencies:

    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3.1</version>
    </dependency>

    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.4</version>
    </dependency>

    <dependency>
        <groupId>org.springframework.data</groupId>
        <artifactId>spring-data-rest-webmvc</artifactId>
        <version>2.0.1.RELEASE</version>
    </dependency>

how to upload a file with springMVC restful service and jQuery

2 Answers2