WebUploaderはバックグラウンドに画像をアップロードします
21560 ワード
最近会社は新しい若者を募集して、彼らはピクチャーをアップロードすることさえできなくて、仕方がなくて、それから自分でwebUploaderプラグインで1つの小さい栗を書くしかありません
WebUploaderのダウンロードリンク:http://fex.baidu.com/webuploader/download.html
まず、フロントjsは簡単で、直接copy、pasteがあります.
バックグラウンドはMVC、コントロールで受け取ります
WebUploaderのダウンロードリンク:http://fex.baidu.com/webuploader/download.html
まず、フロントjsは簡単で、直接copy、pasteがあります.
jQuery(function() { var $ = jQuery, $list = $('#fileList'), // retina, retina 2 ratio = window.devicePixelRatio || 1, // thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio, // Web Uploader uploader; // Web Uploader uploader = WebUploader.create({ // 。 auto: false, // swf // swf swf: 'basePath%>plugins/js/Uploader.swf', // 。 server: ' server', threads:'5', // 5 fileNumLimit:'1', // 10 , , 1 // 。 。 pick: {id:'#filePicker', // multiple:true}, // // , type `image/jpeg` 。 quality: 90, // ,accept accept: { title: 'Images',// extensions: 'gif,jpg,jpeg,bmp,png',// mimeTypes: 'image/*'//mime } }); // , img uploader.on( 'fileQueued', function( file ) { var $li = $( '
id + '" class="file-item thumbnail">' + '' + '' ), $img = $li.find('img'); // $list jQuery $list.append( $li ); // // , 。 // thumbnailWidth x thumbnailHeight 100 x 100 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith(' '); return; } $img.attr( 'src', src ); }, thumbnailWidth, thumbnailHeight ); }); // 。 uploadProgress : , 。 file percentage Nuber uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress span'); // if ( !$percent.length ) { $percent = $('' + file.name + '' + '') .appendTo( $li ) .find('span'); } $percent.css( 'width', percentage * 100 + '%' ); }); // , item class, 。 file: , response: uploader.on( 'uploadSuccess', function( file,response) { $( '#'+file.id ).addClass('upload-state-done'); //console.info(response); $("#upInfo").html(""+response._raw+""); }); // file: , code: uploader.on( 'uploadError', function(file,code) { var $li = $( '#'+file.id ), $error = $li.find('div.error'); // if ( !$error.length ) { $error = $('
').appendTo( $li ); } $error.text(' !'); }); // , 。 file: uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').remove(); }); // $("#btn").click(function() { // console.log(" ..."); uploader.upload(); // // console.log(" "); }); });
バックグラウンドはMVC、コントロールで受け取ります
@RequestMapping("uploader")
public String upload(HttpServletRequest request)throws Exception{
System.out.println(" !");
String path1 = null;
PageData pd = this.getPageData();
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
// multiRequest
Iterator iter = multiRequest.getFileNames();
while (iter.hasNext()) {
//
MultipartFile file = multiRequest.getFile(iter.next().toString());
if (file != null) {
//
String fileName = this.get32UUID();
String name = file.getOriginalFilename();
String endName = name.split("\\.")[1];
path1 = Const.FILEPATHIMG + DateUtil.getDays() + "/" + fileName + "." + endName;
//
String path = PathUtil.getClasspath() + path1;
createDir(path);
file.transferTo(new File(path));
}
}
pd.put("idCard",path1);
pd.put("createTime",DateUtil.getTime());
pd.put("updateTime",DateUtil.getTime());
Service.saveZsInvestor(pd);
System.out.println(" ");
return path1;
}