Spring Boot 는 WebUploader 를 이용 하여 파일 업로드 기능 을 수행 합 니 다.
WebUploader 는 Baidu WebFE(FEX)팀 이 개발 한 간단 한 HTML 5 위주,FLASH 를 보조 로 하 는 현대 파일 업로드 구성 요소 입 니 다.현대 의 브 라 우 저 에서 HTML 5 의 장점 을 충분히 발휘 할 수 있 을 뿐만 아니 라 주류 IE 브 라 우 저 를 버 리 지 않 고 원래 의 FLASH 가 실 행 될 때 IE6+,iOS 6+,android 4+를 호 환 할 수 있다.두 세트 가 실 행 될 때 같은 호출 방식 은 사용자 가 임의로 선택 할 수 있다.큰 파일 을 나 누 어 동시 업로드 하여 파일 업로드 효율 을 크게 향상 시 켰 다.
우 리 는 홈 페이지 의 예 를 들 어 개인 프로필 사진 을 올 리 는 것 을 실현 한다.
Spring Boot 프로젝트 에서 웹 Uploader 를 이용 하여 파일 을 어떻게 업로드 하 는 지 에 중점 을 두 고 있 기 때문에 간단 한 기능 을 직접 실현 하 는 것 입 니 다.참고 하 시기 바 랍 니 다.
다음은 홈 페이지 에서 다운로드 한 예제 입 니 다.가위질 이 있 는 사진 업로드 기능 입 니 다.
우 리 는 예 시 를 이용 하여 프로젝트 중의 개인 프로필 사진 을 개조 하여 올 렸 다.
효과 가 이렇게 보 입 니 다.
우선 웹 Uploader 예제 코드 를 개조 하 겠 습 니 다.
다음은 모두 제 프로젝트 의 일부 코드 입 니 다.
(function( factory ) {
if ( !window.jQuery ) {
alert('jQuery is required.')
}
jQuery(function() {
factory.call( null, jQuery );
});
})
(function( $ ) {
// -----------------------------------------------------
// ------------ START ----------------------------------
// -----------------------------------------------------
// ---------------------------------
// --------- Uploader -------------
// ---------------------------------
var Uploader = (function() {
// -------setting-------
// , Croper UI , crop.
var FRAME_WIDTH = 1600;
var _ = WebUploader;
var Uploader = _.Uploader;
var uploaderContainer = $('.uploader-container');
var uploader, file;
if ( !Uploader.support() ) {
alert( 'Web Uploader !');
throw new Error( 'WebUploader does not support the browser you are using.' );
}
// hook,
// 。
Uploader.register({
'before-send-file': 'cropImage'
}, {
cropImage: function( file ) {
var data = file._cropData,
image, deferred;
file = this.request( 'get-file', file );
deferred = _.Deferred();
image = new _.Lib.Image();
deferred.always(function() {
image.destroy();
image = null;
});
image.once( 'error', deferred.reject );
image.once( 'load', function() {
image.crop( data.x, data.y, data.width, data.height, data.scale );
});
image.once( 'complete', function() {
var blob, size;
// UC / qq
// ctx.getImageData Exception
// INDEX_SIZE_ERR: DOM Exception 1
try {
blob = image.getAsBlob();
size = file.size;
file.source = blob;
file.size = blob.size;
file.trigger( 'resize', blob.size, size );
deferred.resolve();
} catch ( e ) {
console.log( e );
// ,
deferred.resolve();
}
});
file._info && image.info( file._info );
file._meta && image.meta( file._meta );
image.loadFromBlob( file.source );
return deferred.promise();
}
});
return {
init: function( selectCb ) {
uploader = new Uploader({
pick: {
id: '#filePicker',
multiple: false
},
// 。
thumb: {
quality: 70,
//
allowMagnify: false,
// 。 。
crop: false
},
// , 。
chunked: false,
// , 。
compress: false,
// fileSingleSizeLimit: 2 * 1024 * 1024,
server: 'StudentImgFileUpload',
swf: $.trim($("#BASE_URL").val()) + '/static/webuploader/Uploader.swf',
fileNumLimit: 1,
// 。
accept: {
title: 'Images',
// extensions: 'gif,jpg,jpeg,bmp,png',
// mimeTypes: 'image/*'
extensions: 'jpg,jpeg,png',
// WebUploader chrome
mimeTypes: 'image/jpg,image/jpeg,image/png' //
}
//formData: {"Authorization": localStorage.token}, // ,
// chunked: true, //
// chunkSize: 10 * 1024 * 1024, //
// threads:1, //
// disableGlobalDnd: true //
// onError: function() {
// var args = [].slice.call(arguments, 0);
// alert(args.join('
'));
// }
});
uploader.on('fileQueued', function( _file ) {
file = _file;
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
alert(' ');
return;
}
selectCb( src );
}, FRAME_WIDTH, 1 ); // height 1, 100% 。
});
/**
*
*/
uploader.on("error", function (type) {
if (type == "Q_TYPE_DENIED") {
showInfo(" JPG、JEPG、PNG、 ");
}
});
// , item class, 。
uploader.on( 'uploadSuccess', function( file ) {
showInfo(" ");
});
// , 。
uploader.on( 'uploadError', function( file ) {
showInfo(" ");
});
},
crop: function( data ) {
var scale = Croper.getImageSize().width / file._info.width;
data.scale = scale;
file._cropData = {
x: data.x1,
y: data.y1,
width: data.width,
height: data.height,
scale: data.scale
};
},
upload: function() {
uploader.upload();
}
}
})();
// ---------------------------------
// --------- Crpper ---------------
// ---------------------------------
var Croper = (function() {
var container = $('.cropper-wraper');
var $image = container.find('.img-container img');
var btn = $('.upload-btn');
var isBase64Supported, callback;
$image.cropper({
aspectRatio: 4 / 4,
preview: ".img-preview",
done: function(data) {
// console.log(data);
}
});
function srcWrap( src, cb ) {
// we need to check this at the first time.
if (typeof 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 = src;
isBase64Supported = support;
})();
}
if ( isBase64Supported ) {
cb( src );
} else {
// otherwise we need server support.
// convert base64 to a file.
// $.ajax('', {
// method: 'POST',
// data: src,
// dataType:'json'
// }).done(function( response ) {
// if (response.result) {
// cb( response.result );
// } else {
// alert(" ");
// }
// });
}
}
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');
return this;
},
getImageSize: function() {
var img = $image.get(0);
return {
width: img.naturalWidth,
height: img.naturalHeight
}
},
setCallback: function( cb ) {
callback = cb;
return this;
},
disable: function() {
$image.cropper("disable");
return this;
},
enable: function() {
$image.cropper("enable");
return this;
}
}
})();
// ------------------------------
// -----------logic--------------
// ------------------------------
var container = $('.uploader-container');
Uploader.init(function( src ) {
Croper.setSource( src );
// 。
container.addClass('webuploader-element-invisible');
// , 。
Croper.setCallback(function( data ) {
Uploader.crop(data);
Uploader.upload();
});
});
// -----------------------------------------------------
// ------------ END ------------------------------------
// -----------------------------------------------------
});
그리고 페이지 의 일부 코드:다음은 Controller 부분의 코드 입 니 다.
@RequestMapping(value="/student/StudentImgFileUpload", method=RequestMethod.POST)
@ResponseBody
String studentImgFileUpload(@RequestParam MultipartFile file, HttpServletRequest request){
logger.info(" ....")
//
String originalFilename = file.getOriginalFilename()
logger.info(" :" + originalFilename)
String realPath = request.getServletContext().getRealPath("/public/student/")
String uploadFileName = System.currentTimeMillis()+"_"+ originalFilename
logger.info(" :" + realPath + ", :" + uploadFileName)
boolean flag = true
//
RandomAccessFile raFile = null
BufferedInputStream inputStream = null
try{
File dirFile = new File(realPath, uploadFileName)
//
raFile = new RandomAccessFile(dirFile, "rw")
raFile.seek(raFile.length())
inputStream = new 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){
flag = false
logger.info(" :" + e.getMessage())
throw new IOException(e.getMessage())
}finally{
try {
if (inputStream != null) {
inputStream.close()
}
if (raFile != null) {
raFile.close()
}
}catch(Exception e){
flag = false
logger.info(" :" + e.getMessage())
throw new IOException(e.getMessage())
}
}
}
이렇게 하면 Spring Boot 프로젝트 에서 WebUploader 를 사용 하여 파일 업 로드 를 하 는 기능 을 간단하게 실현 할 수 있다.총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Spring Boot 가 WebUploader 를 이용 하여 파일 업로드 기능 을 하 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
thymeleaf로 HTML 페이지를 동적으로 만듭니다 (spring + gradle)지난번에는 에서 화면에 HTML을 표시했습니다. 이번에는 화면을 동적으로 움직여보고 싶기 때문에 입력한 문자를 화면에 표시시키고 싶습니다. 초보자의 비망록이므로 이상한 점 등 있으면 지적 받을 수 있으면 기쁩니다! ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.