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

太过爱你忘了你带给我的痛 2021-06-26 16:06 722阅读 0赞

## 一、`webuploader`的官网例子：[点击打开链接][Link 1] ##

## 二、上传与编辑实现 ##

### 1、引入`CSS`和`js`文件 ###

<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`:

**修改文件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`,  
![在这里插入图片描述][20190821101952884.png]  
**编辑`service`:**

先删除，在插入

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

[Link 1]: http://fex.baidu.com/webuploader/demo.html
[20190821101952884.png]: /images/20210626/81d0e625c95f4c878d139802d05a6cc7.png