百度上传控件webuploader的上传与修改，Java版本

于 2016-01-07 15:21:59 发布
阅读量3w 收藏 13
点赞数 9
CC 4.0 BY-SA版权
分类专栏： 技术类 文章标签： webupload 上传 修改 Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wxniitxueyuan/article/details/50476610
本文介绍如何使用 WebUploader 实现多文件上传功能，包括引入必要的 CSS 和 JavaScript 文件、配置上传参数、处理上传成功后的回调及编辑已上传文件等步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、webuploader的官网例子：点击打开链接

       

二、上传与编辑实现

       1、引入CSS和js文件

<script type="text/javascript" src="${basePath}/tools/webuploader/dist/webuploader.js"></script>
<script type="text/javascript" src="${basePath}/js/upload/upload.js"></script>
<link rel="stylesheet" type="text/css" href="${basePath}/tools/webuploader/css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="${basePath}/tools/webuploader/examples/image-upload/style.css" />

</pre><pre name="code" class="html">                                                    <div id="wrapper">
							        <div id="container">
							            <!--头部，相册选择和格式选择-->
							            <div id="uploader">
							                <div class="queueList">
							                    <div id="dndArea" class="placeholder">
							                        <div id="filePicker"></div>
							                        <p>或将文件拖到这里，单次最多可选300个</p>
							                    </div>
							                </div>
							                <div class="statusBar" style="display:none;">
							                    <div class="progress">
							                        <span class="text">0%</span>
							                        <span class="percentage"></span>
							                    </div><div class="info"></div>
							                    <div class="btns">
							                        <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
							                    </div>
							                </div>
							            </div>
							        </div>
						      </div>


2、实例化webuploader：

              可以添加对应的mimetype 选择对应的文件上传，这样就不会局限于图片

// 实例化
        uploader = WebUploader.create({
            pick: {
                id: '#filePicker',
                label: '点击选择文件'
            },
            formData: {
                uid: 'yangl'
            },
            dnd: '#dndArea',
            paste: '#uploader',
            swf: '../../dist/Uploader.swf',
            chunked: false,
            chunkSize: 512 * 1024,
            server: getRootPath()+'/upload/fileuploadAction!saveUploadFile.action',
            // runtimeOrder: 'flash',

            accept: {
                title: 'Files',
                extensions: 'gif,jpg,jpeg,bmp,png,pdf,doc,docx,txt,xls,xlsx,ppt,pptx',
                mimeTypes: 'image/*,text/*'
                	        //word
                	       +',application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
                	       //excel
                	       +',application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                	       //ppt
                	       +',application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation'
                	       +',application/pdf'
            },

            // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
            disableGlobalDnd: true,
            fileNumLimit: 300,
            fileSizeLimit: 200 * 1024 * 1024,    // 200 M
            fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
        });

   3、上传实现 
//上传成功
        uploader.on('uploadSuccess', function(file, json) {
        	var file_id=file.id;
        	var arr=file_id.split("_");
                $("#"+file_id).append(inputStr(arr[2], json));
        });
function inputStr(index, json){
        	var inputStr='';
        	//转化格式后的名称
            inputStr+='<input name="'+pre+'list['+index+'].filename"   value="'+json.filename+'" style="display:none"/>';
            //保存路径
            inputStr+='<input name="'+pre+'list['+index+'].filepath"   value="'+json.filepath+'" style="display:none"/>';
           //文件源名称
            inputStr+='<input name="'+pre+'list['+index+'].filebasename"   value="'+json.filebasename+'" style="display:none"/>';
       	
           //文件类型  doc？xls？
            inputStr+='<input name="'+pre+'list['+index+'].filetype"   value="'+json.filetype+'" style="display:none"/>';
            //文件大小
            inputStr+='<input name="'+pre+'list['+index+'].filelen"   value="'+json.filelen+'" style="display:none"/>';
           //doc转为html
            inputStr+='<input name="'+pre+'list['+index+'].doc2htmlpath" value="'+json.doc2htmlpath+'"  style="display:none"/>';
            //mimeType
            inputStr+='<input name="'+pre+'list['+index+'].mimeType" value="'+json.mimeType+'"  style="display:none"/>';
            return inputStr;
        }

Java上传代码：

 获取webuploader的返回参数：

        private String uid;//formData里的参数
	private String id;//文件ID，每个对象具有唯一ID，与文件名无关
	private String name;//文件名，包括扩展名（后缀）
	private String type;//mimetype
	private String size;//文件体积（字节）
	private String fileContentType;
        private String lastModifiedDate;//文件最后修改日期
	private String ext;
	private String fileFileName;//文件名，包括扩展名（后缀）
	private File file;//文件路径
 response返回： 

                        Json json=new Json();
			json.setFilename(newFileName);
			json.setFilebasename(fileFileName);
			json.setFilepath(bPath);
			json.setFiletype(suffix);
			json.setDoc2htmlpath(wordFileName);
			json.setFilelen(size);
			json.setMimeType(type);
			OutputJson(json);
提交到service层批量保存： 

public void saveTSysFilesList(File file) {
		String remark=file.getRemark();
		List<Json> jsonList=file.getList();
		if(jsonList!=null && jsonList.size()>0){
			TSysFiles tsysFiles=null;
			for (Json json:jsonList) {
				if(json!=null){
					tsysFiles=new TSysFiles();
					tsysFiles.setFilename(this.trimFileValue(json.getFilename()));
					tsysFiles.setFilepath(this.trimFileValue(json.getFilepath()));
					tsysFiles.setFilebasename(this.trimFileValue(json.getFilebasename()));
					tsysFiles.setFiletype(this.trimFileValue(json.getFiletype()));
					tsysFiles.setDoc2htmlpath(this.trimFileValue(json.getDoc2htmlpath()));
					tsysFiles.setMntm(DateUtils.getNowTime());
					tsysFiles.setId(json.getId());
					tsysFiles.setFilelen(Double.parseDouble(json.getFilelen()));
					tsysFiles.setRemark(remark);
					tsysFiles.setMimeType(this.trimFileValue(json.getMimeType()));
					publicDao.saveOrUpdate(tsysFiles);
				}
			}
		}
}

4、编辑实现

    uploader.on('ready', function() {}准备工作时加入已有的文件：

   

uploader.on('ready', function() {
            window.uploader = uploader;
//            alert(WebUploader.Base.version);
//            alert(WebUploader.File.name);
            if(fileid){
           //获取数据
           $.post(getRootPath()+'/files/tsysFilesAction!findTSysFilesByParam.action',{param:" and fileid='"+fileid+"' "},function(json){
            var jsonLen=json.rows.length;
                if(jsonLen!=0){
                              fileCount=jsonLen;
                        $placeHolder.addClass( 'element-invisible' );
                        $statusBar.show();
                        //显示在页面上
            $.each(json.rows,function(i,n){
              fileSize += n.filelen;
              var obj={},statusMap={}
                     ,file_id='WU_FILE_' + i;
            obj.id=file_id ;
            obj.name=n.filebasename;
            obj.filename=n.filename;
            obj.getStatus=function() {
                 return '';
            };
            obj.statusText='';
            obj.size=n.filelen;
            obj.version=WebUploader.Base.version;
            obj.type=n.mimeType;
            obj.filetype=n.filetype;
            obj.source=this;
            obj.setStatus=function( status, text ) {
               
                            var prevStatus = statusMap[ this.id ];
          
                       typeof text !== 'undefined' && (this.statusText = text);
            
                       if ( status !== prevStatus ) {
                            statusMap[ this.id ] = status;
                            /**
                             * 文件状态变化
                             * @event statuschange
                             */
                            uploader.trigger( 'statuschange', status, prevStatus );
                       }
            
                    };
                    editFile(obj);
                    $("#"+file_id).append(inputStr(i, n));
            });
            
            WebUploader.Base.idSuffix=jsonLen;
            
            setState( 'ready' );
            updateTotalProgress();
            }
            },'json');
            }
        });

       加入编辑file:

function editFile( file ) {
            var $li = $( '<li id="' + file.id + '">' +
                    '<p class="title">' + file.name + '</p>' +
                    '<p class="imgWrap"></p>'+
                    '<p class="progress"><span></span></p>' +
                    '</li>' ),

                $btns = $('<div class="file-panel">' +
                    '<span class="cancel">删除</span>' +
                    '<span class="rotateRight">向右旋转</span>' +
                    '<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),
                $prgress = $li.find('p.progress span'),
                $wrap = $li.find( 'p.imgWrap' ),
                $info = $('<p class="error"></p>');

                
            if ( file.getStatus() === 'invalid' ) {
                showError( file.statusText );
            } else {
                // @todo lazyload
                $wrap.empty();
                $wrap.text( '不能预览' );
                
            	 var img;
            	 //判断是否是图片
                 if( containsPic(file.filetype) ) {
                	 //读取文件流
                	 var src=getRootPath()+'/download/fileDownLoadAction!showFile.action?fileName='+file.filename;
                     img = $('<img src="'+src+'" style="height:100%;">');
                     $wrap.empty().append( img );
                 } 
                
                percentages[ file.id ] = [ file.size, 0 ];
                file.rotation = 0;
            }

            $li.append( '<span class="success"></span>' );

            $li.on( 'mouseenter', function() {
                $btns.stop().animate({height: 30});
            });

            $li.on( 'mouseleave', function() {
                $btns.stop().animate({height: 0});
            });

            $btns.on( 'click', 'span', function() {
                var index = $(this).index(),
                    deg;

                switch ( index ) {
                    case 0:
                        uploader.removeFile( file );
                        return;

                    case 1:
                        file.rotation += 90;
                        break;

                    case 2:
                        file.rotation -= 90;
                        break;
                }

                if ( supportTransition ) {
                    deg = 'rotate(' + file.rotation + 'deg)';
                    $wrap.css({
                        '-webkit-transform': deg,
                        '-mos-transform': deg,
                        '-o-transform': deg,
                        'transform': deg
                    });
                } else {
                    $wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
                }


            });

            $li.appendTo( $queue );
        }

修改文件webuploader.js：

  属性封装 define('file',[
        'base',
        'mediator'
    ], function( Base, Mediator ) 里的代码：将

function gid() {
            return idPrefix + idSuffix++;
        }
改为： 
function gid() {
        	if(idSuffix == 0){
        		idSuffix = Base.idSuffix;
        	}
        	console.log("file.gid()："+idPrefix + idSuffix);
            return idPrefix + idSuffix++;
        }
修改define('base',[
        'dollar',
        'promise'
    ], function( $, promise )里的返回值：

                      新增一个属性idSuffix: 0,

   

编辑service:

先删除，在插入

public void updateTSysFilesList(File file) {
		this.deleteTSysFilesByFileId(file.getId());
		this.saveTSysFilesList(file);
}



评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值