비동기 파일 업로드를 완료하는 HTML Jquery 코드 예제

이 기사에서는 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 서블릿 - context.xml

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

6.3 Controller

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

아아아앙

7호환성

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

8 추천 도서

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

JQuery 파일 업로더

【관련 추천】

1. HTML 무료 동영상 튜토리얼

2. HTTP 헤더 지식 포인트에 대한 그래픽 설명

3. Html5 데이터 목록 태그 및 배경 데이터와의 동적 매칭에 대한 자세한 설명

4. HTML 및 CSS 지식 포인트에 대한 포괄적인 요약 공유

5. nodejs에서 html을 파싱하는 방법을 가르쳐주세요

위 내용은 비동기 파일 업로드를 완료하는 HTML Jquery 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!