이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
위 내용은 H5 파일 비동기 업로드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!