Html Jquery code example to complete asynchronous file upload

This article briefly introduces the use of Html5's FormData to implement asynchronous uploading of files, and can also implement upload progress bars and file size verification. The code is simple and easy to understand, very good, and has reference value. Friends who need it can refer to it

1 Introduction

Developing a file upload function is never a pleasant thing, especially asynchronous upload. I have used iframe and Flash upload solutions. , also felt very awkward. This article briefly introduces the use of Html5's FormData to implement asynchronous uploading of files, and can also implement upload progress bars and file size verification. The server uses the springMVC solution for processing.

2 Html code

<form id="myForm">
    <input type="file" id="u_photo" name="u_photo" />
    <input type="button" id="submit-btn" value="上传" />
</form>

3 JQuery upload

$("#submit-btn").on('click', function() {
    $.ajax({
        url:"/test/upload",
        type:"post",
        data:new FormData($("#myForm").get(0)),
        //十分重要，不能省略
        cache: false,
        processData: false,
        contentType: false,
        success: function () {
            alert("上传成功！");
        }
    });
});

4 JQuery file size verification

The control of file size and corresponding behavior needs to be handled by yourself as needed. This method is just an example method.

$('#u_photo').on('change', function() {
    var file = this.files[0];
    if (file.size > 1024*1000) {
        alert('文件最大1M！')
    }
});

5 JQuery progress bar

Add xhr to the ajax method to control the upload progress. The progress bar can also use the progress of html5. Use other progress bars. Displaying and hiding the progress bar needs to be handled by yourself. This method only briefly introduces the basic control of the progress bar.

xhr: function() {
    var myXhr = $.ajaxSettings.xhr();
    if (myXhr.upload) {
        myXhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                $('progress').attr({
                    value: e.loaded,
                    max: e.total,
                });
            }
        } , false);
    }
    return myXhr;
}

6 springMVC server

6.1 maven dependency

<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.5</version>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.2</version>
</dependency>

6.2 servlet -context.xml

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

6.3 Controller

sample program does not provide the corresponding code for file verification, storage and processing.

@RequestMapping(value="/test/upload",method = RequestMethod.POST)
@ResponseBody
public String upload(@RequestParam("u_photo") MultipartFile u_photo) {
    System.out.println("u_photo="+u_photo.getSize());
    return "ok";
}

7 Compatibility

IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

8 Recommended reading

If you are not satisfied with the above solution, it is recommended to use the following solution:

JQuery File Uploader

[Related recommendations]

1. HTML free video tutorial

2. Graphical explanation of HTTP Headers knowledge points

3. Detailed explanation of Html5 datalist tags and dynamic matching with background data

4. Share a super comprehensive summary of HTML and CSS knowledge points

5. Teach you how to parse html under nodejs

The above is the detailed content of Html Jquery code example to complete asynchronous file upload. For more information, please follow other related articles on the PHP Chinese website!