Html5가 비동기 파일 업로드 기능을 구현하는 방법에 대한 예제 분석

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

1 소개

파일 업로드 기능을 개발하는 것은 결코 즐거운 일이 아니었습니다. 특히 저는 의 업로드 솔루션을 사용해 왔습니다. iframe과 Flash는 모두 매우 편안합니다. 이 기사에서는 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>
    <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

샘플 프로그램은 파일 확인 기능을 제공하지 않습니다. 저장 및 처리.

@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 호환성

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

8 추천 도서

위의 해결 방법이 만족스럽지 않은 경우 다음 해결 방법을 사용하는 것이 좋습니다.

JQuery 파일 업로더

위 내용은 Html5가 비동기 파일 업로드 기능을 구현하는 방법에 대한 예제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!