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

一、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" />

<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);
    }