webuploader一个页面多个上传

在项目中用jsp自定义标签写的一个上传标签,用的百度的webuploader。主要是页面上的一些东西,参数是通过标签传递过来的。

//创建上传
function createWebUploader(inputValue, fileGropId, inputHiddenTagId, directoryName, osspath) {
	var me = this;
	var fileGropId = inputValue || fileGropId;
	var btnId = '#' + inputHiddenTagId + 'Btn';
	var bindEvent = function(uploader) {
		uploader.on('uploadProgress', function(file, percentage) {
			var progressName = '<div id="progress' + file.id + '"><div class="progressName">' + file.name + '</div><div data-percent="0%" class="progress progress-striped pos-rel"><div class="progress-bar progress-bar-success" style="width: 0%;" id="' + file.id + '"></div></div></div>';
			if ($('#' + file.id).length) {
				$('#' + file.id).css('width', percentage * 100 + '%');
				$('#' + file.id).parent().attr('data-percent', percentage * 100 + '%');
			} else {
				$(btnId).before(progressName);
			}
		});
		// 文件上传成功,给item添加成功class, 用样式标记上传成功。
		uploader.on('uploadSuccess', function(file, response) {
			var parent = $(btnId).parent();
			if (parent.find('.list-group').length == 0) {
				var ul = $('<ul class="list-group" >');
				var li = '<li class="list-group-item "><a class="pull-right" fileId="' + response.id + '" onclick="deleteFile(this,' + inputHiddenTagId + ')" title="删除文件" ><i class="fa fa-trash"></i></a><a title="文件下载" target="view_window" href="' + osspath + response.extName + '">' + file.name + '</a></li> ';
				ul.prepend(li);
				parent.prepend(ul);
			} else {
				var li = '<li class="list-group-item "><a class="pull-right" fileId="' + response.id + '" onclick="deleteFile(this,' + inputHiddenTagId + ')" title="删除文件" ><i class="fa fa-trash"></i></a><a title="文件下载" target="view_window" href="' + osspath + response.extName + '">' + file.name + '</a></li> ';
				parent.find('.list-group').prepend(li);
			}
			$('.pull-right').hover(function() {
				layer.tips('删除文件', this);
			}, function() {
			});
			$('#progress' + file.id).slideUp(2000, function() {
				$('#progress' + file.id).remove();
				// 清空队列
				uploader.reset();
			});
		});

		// 完成上传完了,成功或者失败,先删除进度条。
		uploader.on('uploadComplete', function(file) {
			$('#' + inputHiddenTagId).val((inputValue || fileGropId));
		});
		deleteFile = function(data, inputHidden) {
			var file = $(data);
			var fileId = file.attr('fileId');
			if (fileId) {
				$.ajax({
					cache : true,
					type : "POST",
					url : rootpath + '/attachment/delete.do',
					data : {
						ATTACHMENT_ID : fileId
					},
					success : function(data) {
						var ul = file.parent().parent();
						file.parent().remove();
						if (!ul.find('li').length) {
							ul.remove();
							$(inputHidden).val('')
						}
					}
				});
			}
		}
	}

	bindEvent(WebUploader.create({
		// swf文件路径
		swf : basePath + '/static/common/plugins/webuploader-0.1.5/Uploader.swf',
		// 文件接收服务端。
		server : basePath + '/fileUploader.do?fileGropId=' + (inputValue || fileGropId) + '&directoryName=' + directoryName,
		// 选择文件的按钮。可选。
		// 内部根据当前运行是创建,可能是input元素,也可能是flash.
		pick : btnId,
		// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
		resize : false,
		// [默认值:false] 设置为 true 后,不需要手动调用上传,有文件选择即开始上传。
		auto : true
	}));
}

 

 

点赞

发表评论