웹 uploader 는 서버 에 사진 을 업로드 하 는 기능 을 실현 합 니 다.
5458 단어 webuploader사진 업로드
효과 그림:
1.자원 파일 도입
1.1 webuploader.css 파일 도입
<!-- CSS-->
<link rel="stylesheet" type="text/css" href="../../css/plugins/webuploader/webuploader.css" >
1.2 webuploader.min.js 파일 도입
<!-- JS-->
<script type="text/javascript" src="../../js/plugins/webuploader/webuploader.min.js"></script>
HTML 코드
<div class = "row">
<div class="btns col-sm-2">
<div id="picker"> </div>
<button id="ctlBtn" class="btn default-btn"> </button>
</div>
<!-- -->
<div id="thelist" class="uploader-list col-sm-10"></div>
</div>
3.JavaScript 코드
<script type="text/javascript">
$(function(){
var uploader = WebUploader.create({
// , 。
auto: false,
// 。
server: '/common/webupload_pic',
// 。 。
// , input , flash.
pick: '#picker',
// image, jpeg, !
resize: false,
// 。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
/* fileSizeLimit :10, // ,
fileSingleSizeLimit :10, // , 。 */
duplicate :true // , 、 hash Key.
});
// , handler false, 。
uploader.on( 'beforeFileQueued', function( file ) {
//
img_length = $("#thelist img").length;
if (img_length >= 6) {
layer.msg(" 6 ");
return false;
}
});
//
uploader.on( 'fileQueued', function( file ) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail col-sm-3" style="width:150px;margin-left:10px;">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'<span style="margin-left: 78%;cursor:pointer;" onclick="deleteFile(this)"> </span>' +
'</div>'
),
$img = $li.find('img');
// $list jQuery
$("#thelist").append( $li );
//
// , 。
// thumbnailWidth x thumbnailHeight 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span> </span>');
return;
}
$img.attr( 'src', src );
}, 150, 150 );
});
// , item class, 。
uploader.on( 'uploadSuccess', function( file ) {
$( '#'+file.id ).addClass('upload-state-done');
var $li = $( '#'+file.id ),
$done = $li.find('div.upload-state-done');
//
if ( !$done.length ) {
$done = $('<div class=""></div>').appendTo( $li );
}
$done.html('<font color="blue"> </font>');
});
// , 。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
//
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.html('<font color="red"> </font>');
});
$("#ctlBtn").click(function(){
uploader.upload();
})
})
function deleteFile(obj) {
$(obj).parent().remove();
}
</script>
자바 코드
/**
*
* @Title: webuploadPic
* @Description: webupload
* @author:
* @param files
* @return
* @throws IOException
* @return: MessageInfo
*/
@RequestMapping("/webupload_pic")
@ResponseBody
public MessageInfo webuploadPic(HttpServletRequest request) throws IOException {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
List<String> file_url_list = Lists.newArrayList();
for (MultipartFile file:fileMap.values()) {
file_url_list.add("/pictures/"+FileUtil.uploadFile(file, pictures_url));
}
return ResultGenerator.genSuccessResult(file_url_list);
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
springboot webuploader 사진이 칠우운에 올라왔습니다.우선 칠우운을 등록해야 한다. 백엔드pom.xml 파일 설정은 플러그인에 의존합니다. application.properties 자원 파일 설정 application-dev.properties 자원 구성 Applica...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.