webuploader java版本

用户5640963

发布于 2019-07-26 10:00:00

1K0

发布于 2019-07-26 10:00:00

文章被收录于专栏：卯金刀GG

网上一些webuploader上传的资料，有php版和java版本的，做了一下整合，现分享以下成果，可以讨论，不喜勿碰。说一下过程。

第一步：下载地址，提供官网地址

http://fex.baidu.com/webuploader/

第二步：示例页面关键代码

html页面

第三步：diyUpload,封装了webuploader的自有js

diyUpload.js，在此感谢“黑同学”

/* * jQuery文件上传插件,封装UI,上传处理操作采用Baidu WebUploader; */ (function( $ ) { $.fn.extend({ /* * 上传方法 opt为参数配置; * serverCallBack回调函数每个文件上传至服务端后,服务端返回参数,无论成功失败都会调用参数为服务器返回信息; */ diyUpload:function( opt, serverCallBack ) { if ( typeof opt != "object" ) { alert('参数错误!'); return; } var $fileInput = $(this); var $fileInputId = $fileInput.attr('id'); //组装参数; if( opt.url ) { opt.server = opt.url; delete opt.url; } if( opt.success ) { var successCallBack = opt.success; delete opt.success; } if( opt.error ) { var errorCallBack = opt.error; delete opt.error; } //迭代出默认配置 $.each( getOption( '#'+$fileInputId ),function( key, value ){ opt[ key ] = opt[ key ] || value; }); if ( opt.buttonText ) { opt['pick']['label'] = opt.buttonText; delete opt.buttonText; } var webUploader = getUploader( opt ); if ( !WebUploader.Uploader.support() ) { alert( ' 上传组件不支持您的浏览器！'); return false; } //绑定文件加入队列事件; webUploader.on('fileQueued', function( file ) { createBox( $fileInput, file ,webUploader); }); //进度条事件 webUploader.on('uploadProgress',function( file, percentage ){ var $fileBox = $('#fileBox_'+file.id); var $diyBar = $fileBox.find('.diyBar'); $diyBar.show(); percentage = percentage*100; showDiyProgress( percentage.toFixed(2), $diyBar); }); //全部上传结束后触发; webUploader.on('uploadFinished', function(){ $fileInput.next('.parentFileBox').children('.diyButton').remove(); }); //绑定发送至服务端返回后触发事件; webUploader.on('uploadAccept', function( object ,data ){ if ( serverCallBack ) serverCallBack( data ); }); //上传成功后触发事件; webUploader.on('uploadSuccess',function( file, response ){ var $fileBox = $('#fileBox_'+file.id); var $diyBar = $fileBox.find('.diyBar'); $fileBox.removeClass('diyUploadHover'); $diyBar.fadeOut( 1000 ,function(){ $fileBox.children('.diySuccess').show(); }); if ( successCallBack ) { successCallBack( response ); } }); //上传失败后触发事件; webUploader.on('uploadError',function( file, reason ){ var $fileBox = $('#fileBox_'+file.id); var $diyBar = $fileBox.find('.diyBar'); showDiyProgress( 0, $diyBar , '上传失败!' ); var err = '上传失败! 文件:'+file.name+' 错误码:'+reason; if ( errorCallBack ) { errorCallBack( err ); } }); //选择文件错误触发事件; webUploader.on('error', function( code ) { var text = ''; switch( code ) { case 'F_DUPLICATE' : text = '该文件已经被选择了!' ; break; case 'Q_EXCEED_NUM_LIMIT' : text = '上传文件数量超过限制!' ; break; case 'F_EXCEED_SIZE' : text = '文件大小超过限制!'; break; case 'Q_EXCEED_SIZE_LIMIT' : text = '所有文件总大小超过限制!'; break; case 'Q_TYPE_DENIED' : text = '文件类型不正确或者是空文件!'; break; default : text = '未知错误!'; break; } alert( text ); }); } }); //Web Uploader默认配置; function getOption(objId) { /* * 配置文件同webUploader一致,这里只给出默认配置. * 具体参照:http://fex.baidu.com/webuploader/doc/index.html */ return { //按钮容器; pick:{ id:objId, label:"点击选择图片" }, //类型限制; accept:{ title:"Images", extensions:"gif,jpg,jpeg,bmp,png", mimeTypes:"image/*" }, //配置生成缩略图的选项 thumb:{ width:170, height:150, // 图片质量，只有type为`image/jpeg`的时候才有效。 quality:70, // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false. allowMagnify:false, // 是否允许裁剪。 crop:true, // 为空的话则保留原有图片格式。 // 否则强制转换成指定的类型。 type:"image/jpeg" }, //文件上传方式 method:"POST", //服务器地址; server:"", //是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容 sendAsBinary:false, // 开起分片上传。 thinkphp的上传类测试分片无效,图片丢失; chunked:true, // 分片大小 chunkSize:512 * 1024, //最大上传的文件数量, 总文件大小,单个文件大小(单位字节); fileNumLimit:1, fileSizeLimit:500 * 1024, fileSingleSizeLimit:500 * 1024 }; } //实例化Web Uploader function getUploader( opt ) {

return new WebUploader.Uploader( opt ); } //操作进度条; function showDiyProgress( progress, $diyBar, text ) { if ( progress >= 100 ) { progress = progress + '%'; text = text || '上传完成'; } else { progress = progress + '%'; text = text || progress; } var $diyProgress = $diyBar.find('.diyProgress'); var $diyProgressText = $diyBar.find('.diyProgressText'); $diyProgress.width( progress ); $diyProgressText.text( text ); } //取消事件; function removeLi ( $li ,file_id ,webUploader) { webUploader.removeFile( file_id ); if ( $li.siblings('li').length <= 0 ) { $li.parents('.parentFileBox').remove(); } else { $li.remove(); } } //创建文件操作div; function createBox( $fileInput, file, webUploader ) {

//绑定取消事件; var $diyCancel = $fileBox.children('.diyCancel').one('click',function(){ removeLi( $(this).parent('li'), file_id, webUploader ); }); if ( file.type.split("/")[0] != 'image' ) { var liClassName = getFileTypeClassName( file.name.split(".").pop() ); $fileBox.addClass(liClassName); return; } //生成预览缩略图; webUploader.makeThumb( file, function( error, dataSrc ) { if ( !error ) { $fileBox.find('.viewThumb').append('<img src="'+dataSrc+'" >'); } }); } //获取文件类型; function getFileTypeClassName ( type ) { var fileType = {}; var suffix = '_diy_bg'; fileType['pdf'] = 'pdf'; fileType['zip'] = 'zip'; fileType['rar'] = 'rar'; fileType['csv'] = 'csv'; fileType['doc'] = 'doc'; fileType['xls'] = 'xls'; fileType['xlsx'] = 'xls'; fileType['txt'] = 'txt'; fileType = fileType[type] || 'txt'; return fileType+suffix; } })( jQuery );

//绑定取消全部按钮; $cancelButton.bind('click',function(){ //var fileArr = webUploader.getFiles( 'queued' ); //修改获取队列的方法，不要参数，直接获取所有队列 var fileArr = webUploader.getFiles(); $.each( fileArr ,function( i, v ){ removeLi( $('#fileBox_'+v.id), v.id, webUploader ); }); });

第四步：调用divupload.js,给test的div绑定事件

第五步：java后台调用controler

@RequestMapping(value = "/imgupload") public void imgupload(HttpServletRequest request, HttpServletResponse response) throws IllegalStateException, IOException { String info = request.getParameter("query"); JSONObject JInfo = JSONObject.fromObject(info);

//imgs_path是img的实际保存路径 JInfo.element("imgs_path", imgs_path);

//xuni_imgs_path是img的虚拟路径，此处参考tomcat虚拟路径的设置 JInfo.element("xuni_imgs_path", xuni_imgs_path); int val = fileServcie.uploadImgs(request, JInfo); /*String message = JSONUtils.reMsg(val); this.ajax(response, message, AbstractBaseController.JSON);*/ this.ajax(response, "上传成功", AbstractBaseController.JSON); }

第六步：fileServcie.uploadImgs的上传方法

public int uploadImgs(HttpServletRequest request, JSONObject JInfo) throws IllegalStateException, IOException { int val = 0; String imgs_path = JInfo.getString("imgs_path"); File destFile = new File(imgs_path); if(!destFile.exists()) { destFile.mkdirs(); } String tblname = JsonUtil.getJSONStringByKey(JInfo, "tblname"); CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver( request.getSession().getServletContext()); if(multipartResolver.isMultipart(request)) { //将request变成多部分request MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)request; //获取multiRequest 中所有的文件名 Iterator iter=multiRequest.getFileNames(); while(iter.hasNext()) { MultipartFile file=multiRequest.getFile(iter.next().toString()); if(file!=null) { long size = file.getSize(); String contentType = file.getContentType(); String fileName = file.getOriginalFilename(); if(!fileName.equals("")) { fileName = UUID.randomUUID()+fileName; String imgBasepath= imgs_path + fileName; //上传 file.transferTo(new File(imgBasepath)); /* if(tblname.equals("ZJKB")) { ZywsptZjkb zywsptZjkb = new ZywsptZjkb(); zywsptZjkb.setId(BigDecimal.valueOf(JInfo.getLong("id"))); zywsptZjkb.setSctx(JInfo.getString("xuni_imgs_path")+fileName); zywsptZjkb.setGxz(JInfo.getString("user")); zywsptZjkb.setGxsj(new Date()); val = zywsptZjkbMapper.updateByPrimaryKeySelective(zywsptZjkb); }*/ } } } } return val; }

此处使用的是multipartResolver的上传组件，

在springxml中的配置如下：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="utf-8"/> <property name="maxInMemorySize" value="1073741824"/> <property name="maxUploadSize" value="102400000"/> </bean>

第七步：完成收功。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法