개발 파일의 업로드 기능은 결코 즐거운 일이 아니 었습니다. 이 기사는 HTML5의 FormData를 간략하게 사용하여 파일의 비동기 업로드를 구현하고 업로드 엔트리 바 및 파일 크기 확인을 달성 할 수도 있습니다. 서버는 처리를 위해 SpringMVC 체계를 사용합니다.
2 HTML 코드<form id = myform> <입력 유형 = 파일 ID = u_photo name = u_photo/> <입력 유형 = 버튼 id = 제출 -BTN 값 = upload/> </form>3 jQuery 업로드
$ (#upply-btn) .on ( 'click', function () {$ .ajax ({url :/test/upload, type : post, data : new formdata ($ (#myform) .get (0)) , // 캐시를 생략 할 수 없습니다 : false, processData : false, contentType : false : function () {alert (성공 업로드!);}); 4 jQuery 파일 크기 확인파일 크기의 제어와 해당 동작은 필요에 따라 자체적으로 처리해야합니다.
$ ( '#U_PHOTO'). }}});5 jQuery Progress Bar
AJAX 방법에 XHR을 추가하여 업로드 진행 상황을 제어하십시오. 이 방법을 보여주고 숨겨진 진행률 표시 줄은 단순히 진행률 표시 줄의 기본 제어를 소개합니다.
xhr : function () {var myxhr = $ .ajaxsettings.xhr (); .attr ({value : e.loaded, max : e.total,});}}, false);} return myxhr;} 6 SpringMVC 서버 6.1 Maven 의존성<pectionency> <groupId> Commons-Io </groupId> <artifactID> Commons-Io </artifactid> <버전> </version> </fectionency> <groupid> Commons- FileUpload </groupId> <ArttifactID> Commons-FileUpload </artifactid> <bersion> 1.3.2 </version> </fectionency>6.2 Servlet-context.xml
<bean id = multipartresolver class = org.springframework.web.multipart.commonsmonsmultipresolver />6.3 컨트롤러
예제 프로그램은 파일 확인, 저장 및 처리에 해당 코드를 제공하지 않습니다.
@RequestMapping (value =/test/upload, method = requestmethod.post) @ResponseBodyPublic String Upload (@requestParam (u_photo) multipartfile _photo) {system.out.println (u_photo =+u_photo.getSize (}); 7 호환성IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+
8 권장 독서위의 계획에 만족하지 않으면 다음 솔루션을 사용하는 것이 좋습니다.
jQuery 파일 업 로더
위는 Xiaobian이 소개 한 HTML5 구현 파일의 비동기 업로드 기능입니다. VEVB WULIN 웹 사이트를 지원해 주셔서 대단히 감사합니다!