H5 파일 비동기 업로드

php中世界最好的语言원래의: 2018-03-26 16:27:482956검색

이번에는 H5 파일 비동기 업로드를 가져왔습니다. H5 파일 비동기 업로드 시 주의사항은 무엇인가요?

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

샘플 프로그램, 파일 검증이 제공되지 않음, 해당 코드 저장 및 처리를 위해.

@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 File Uploader

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!