webuploader java版本

最新推荐文章于 2024-10-09 11:03:34 发布

weixin_33735077

最新推荐文章于 2024-10-09 11:03:34 发布

阅读量255

点赞数

文章标签： java javascript json ViewUI

原文链接：https://my.oschina.net/maojindaoGG/blog/808835

版权

2019独角兽企业重金招聘Python工程师标准>>>

网上一些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>

第七步：完成收功。

转载于:https://my.oschina.net/maojindaoGG/blog/808835