웹 업로더 소개
WebUploader는 간단한 최신 파일 업로드 구성 요소로 주로 html5이며 Baidu Webfe (FEX) 팀이 개발 한 플래시로 보충합니다. 현대식 브라우저에서는 HTML5의 장점을 완전히 플레이 할 수 있으며, IE 주류 브라우저를 포기하지 않고 원래 플래시 런타임을 계속 사용하고 IE6+, iOS 6+, Android 4+와 호환됩니다. 두 세트의 실행 시간, 동일한 통화 방법을 사용자가 선택할 수 있습니다. 대형 파일 조각화 동시 업로드를 사용하면 파일 업로드의 효율성이 크게 향상됩니다.
여기서는 공식 웹 사이트의 예를 사용하여 개인 아바타를 업로드합니다.
우리의 초점은 Spring Boot Project에서 WebUploader를 사용하여 파일을 업로드하는 방법에 중점을 두므로 참조 용 간단한 기능을 직접 구현할 수 있습니다.
다음은 공식 웹 사이트에서 다운로드 한 예입니다 : 자르기가있는 이미지 업로드 기능.
우리는 예제를 사용하여 프로젝트에서 아바타 업로드를 리모델링합니다.
효과는 다음과 같습니다.
먼저 WebUploader 샘플 코드를 리모델링 해 봅시다.
다음은 내 프로젝트의 일부 코드입니다.
(function (factory) {if (! wind --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 오류 ( 'WebUploader는 사용중인 브라우저를 지원하지 않습니다.'; _.deferred (); }; '크기', 크기). image.loadfromblob (file.source); return.promise (); 이것이 사용되면, fown : false : false, // compress : false, filessinglesizelimit : 2 * 1024 * 1024. $ .trim ($ ( "#base_url"). val ()) + '/static/webuploader/uploader.swf', filenumlimit : // 이미지 파일 만 허용됩니다. 'jpg, jpeg, png', // webuploader chrome 파일 선택 상자를 클릭하여 파일 선택 상자를 클릭하여 몇 초 동안 응답이 느리게 지연되기 전에 '이미지/jpg, image/jpeg, image/png'//이 줄} // formdata : { ""권한 화 ": localstorage.token.token}, // prameter는 없습니다. // shash hash // chunksize : 10 * 1024 * 1024, // shash size : 1, // disableglobaldnd : true onerror : function () {// var args = []. }}); UPLOADER.ON ( 'filequeued', function (_file) {file = _file; upload.makethumb (file, function (error, src) {if (error) {alert ( '미리보기');} selectcb (src); rame_width, 1); }); /** 파일 형식 및 파일 크기 확인* / uploader.on ( "error", function (type) {showInfo ( "JPG, JEPG, PNG, 형식 파일");}); uploadsuccess ', filed (file) { "업로드 소스"); file.info.width; scale = {x : data.y1, width : data.width, scale.scale}; ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- img'); var btn = $ ( '. upload-btn'); var isbase64supported, 콜백; $ im 함수 srcwrap (src, cb) {// 처음으로 확인해야합니다. if (isbase64supported === 'undefined')) {(function () {var data = new image (); var support = true; data.onload = data.onerror = function () {if (this.width! = 1 || this.Height! = 1) {support = false;}} data.src = sported; } if (isbase64supported) {cb (src); } else {// 그렇지 않으면 서버 지원이 필요합니다. // base64를 파일로 변환합니다. // $ .ajax ( '', {// method : 'post', // data : src, // datatype : 'json'//}). done (function (response) {// if (response.result) {// cb (response.result); // are {// alert ( "preview error"); //}); }} btn.on ( 'click', function () {callback && callback ($ image.cropper ( "getData")); return false;}); return {setSource : function (src) {// base64 핸들 지원되지 않음. // 일반적으로 IE6-IE8 SRCWRAP (src, function (src) {$ image.cropper ( "setimgsrc", src);}에서 발생합니다. Container.RemoveClass ( 'WebUploader-Element-Invisible'); 이것을 반환하십시오; }, getImagesize : function () {var img = $ image.get (0); return {너비 : img.naturalwidth, height : img.naturalheight}}, setCallback : function (cb) {Callback = cb; 이것을 반환하십시오; }, 비활성화 : function () {$ image.cropper ( "disable"); 이것을 반환하십시오; }, enable : function () {$ image.cropper ( "enable"); 이것을 반환하십시오; }}}}}) (); // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ 업 로더. 크롭 (데이터); upload.upload (); }); }); // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------페이지에 대한 코드도 있습니다.
다음은 컨트롤러 부분의 코드입니다.
@requestmapping (value = "/wiching/student/studentimgfileupload", method = requestmethod.post) @ResponseBody String StudentImgFileUpload (@requestParam multipartFile 파일, httpservletRequest request) {logger.info ( "Student Avatar Upload ...") // 파일 instordfilename = file. logger.info ( "파일 이름 업로드 :" + OriginalFilename) String realPath = requalPath = request.getServletContext (). getRealPath ( "/public/student/") String uploadFilename = System.CurrentTimeMillis () _ " + OriginalFilename logger.info ("get upload path : " + real +", upload + "boolename. 파일 randomAccessFile rafile = null bufferedInputStream inputStream = null try {file dirfile = new 파일 (realPath, uploadFilename) // 읽기 쓰레기 방식으로 대상 파일 열기 = new RandomAccessFile (Dirfile, "RW") rafile.Seek (rafile.length ()) inputStream = bufferedInputStream (file.getInputStream ()) byte [] buf = new Byte [1024] int length = 0 while ((length = inputStream.read (buf))! = -1) {rafile.write (buf, 0, length)}} catch (Exception e)} catch (flage = false logger.info ( ")) ioException (e.getMessage ())} 마침내 {try {if (inputStream! = null) {inputStream.close ()} if (rafile! = null) {rafile.close ()}} catch (예외 e) {flag = false logger.info ( " + E.getmessage ()) }}이것은 단순히 Spring Boot 프로젝트에서 파일 업로드에 WebUploader를 사용하는 기능을 구현합니다.
요약
위는 편집자가 소개 한 스프링 부츠입니다. WebUploader를 사용하여 파일을 업로드합니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!