Html5 파일 비동기 업로드 기능 구현

이 기사에서는 HTML5의 FormData를 사용하여 파일의 비동기 업로드를 구현하는 방법을 간략하게 소개합니다. 또한 업로드 진행률 표시줄과 파일 크기 확인도 구현할 수 있습니다. 코드는 간단하고 이해하기 쉽고 매우 좋으며 필요한 친구에게 유용합니다. 참고할 수 있습니다

1 소개

파일 업로드 기능을 개발하는 것은 결코 즐거운 일이 아니었습니다. 특히 비동기 업로드 솔루션을 사용해 본 적이 있는데 모두 매우 어색했습니다. 이 기사에서는 Html5의 FormData를 사용하여 파일의 비동기 업로드를 구현하는 방법을 간략하게 소개하고 업로드 진행률 표시줄과 파일 크기 확인도 구현할 수 있습니다. 서버는 처리를 위해 springMVC 솔루션을 사용합니다.

2 HTML 코드

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

3 JQuery 업로드

$("#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 파일 크기 확인

파일 크기 및 해당 동작 제어는 귀하를 기반으로 해야 합니다. 직접 처리해야 합니다. 이 방법은 단지 예시 방법일 뿐입니다.

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

5 JQuery 진행률 표시줄

업로드 진행률을 제어하려면 ajax 메서드에 xhr을 추가하세요. 진행률 표시줄은 html5 진행률 또는 기타 진행률 표시줄을 사용할 수 있습니다. 진행률 표시줄 표시 및 숨기기는 직접 처리해야 합니다. 이 방법에서는 진행률 표시줄의 기본 제어 방법을 간략하게 소개합니다.

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 서버

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

샘플 프로그램, The 파일 검증, 저장 및 처리를 위한 해당 코드가 제공되지 않습니다.

@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";
}

E兼7 호환성

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

8 권장 사항

만족합니다. 다음을 사용하는 것이 좋습니다. 솔루션: JQuery 파일 업로더

위 내용은 Html5 파일 비동기 업로드 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!