FileUpload 上传下载文件兼容IE8

项目上使用FileUpload 上传附件，样式比较简单，功能也比较简单。简单的封装了一下

function AttachComponent(field, instanceId, value) {
	this.field = field;
	this.fieldName = this.field.name;
	this.fieldId = "id-" + Math.random() * 10e18 + "-" + this.fieldName;
	this.showName = this.field.showName;
	this.instanceId = instanceId;
	this.value = value;
	this.initializeDom();
}

AttachComponent.prototype.initializeDom = function() {
	var renderType = getFormInstanceRenderType();
	if (renderType == 'CREATE') {
		this.createDom();
	} else if (renderType == 'EDIT') {
		this.editDom();
	} else {
		this.approveDom();
	}
	// this.brush();
};

AttachComponent.prototype.getDom = function() {
	return this.dom;
};

AttachComponent.prototype.createDom = function() {
	if (this.value == null || this.value == undefined || this.value == "") {
		this.value = "";
	}
	var domHtml = new com.isprint.utils.StringBuilder();
	domHtml.append("<div style='clear:both;padding-top:5px;'>");
	domHtml.append("<div class='easyui-panel' title='附件上传' > ");
	domHtml
			.append("<table cellspacing='0' cellpadding='0' style='border: 0px;padding:5px'>");
	domHtml.append("<tr style='height:25px'>");
	domHtml.append("<th><label for='Attachment_GUID'>附件上传：</label></th><td>");
	domHtml.append("<div>");
	domHtml
			.append("<input class='easyui-validatebox' type='hidden' id='Attachment_GUID' name='Attachment_GUID' />");
	domHtml.append("<input id='" + this.fieldId
			+ "' name='file' type='file' multiple='multiple'>");
	domHtml
			.append("<a href='javascript:void(0)' class='easyui-linkbutton' id='btnUpload' data-options='plain:true,iconCls:\"icon-save\"' onclick='AttachComponent.prototype.ajaxFileUpload(\""
					+ this.fieldId + "\")'>上传</a>");
	domHtml.append("<div id='fileQueue' class='fileQueue'></div>");
	domHtml.append("<div id='div_files'></div>");
	domHtml.append("<br />");
	domHtml.append("</div>");
	domHtml.append("</td>");
	domHtml.append("</tr></table>");
	domHtml.append("<table id='uploadFileList'></table>");
	domHtml.append("</div>");
	domHtml.append("</div>");
	this.dom = $(domHtml.toString());

	var dom = this.dom;
	dom
			.find('#uploadFileList')
			.datagrid(
					{
						title : '附件上传列表信息',
						nowrap : false,
						striped : true,
						collapsible : false,
						remoteSort : true,
						idField : 'id',
						singleSelect : true,
						rownumbers : true,
						columns : [ [
								{
									field : 'id',
									title : 'ID',
									width : 120,
									hidden:true
//									formatter : function(value, row, index) {
//										return "<a href='#' class='easyui-linkbutton' onclick='AttachComponent.download(\""
//												+ value
//												+ "\")'>"
//												+ value
//												+ "</a>";
//									}
								}, {
									field : 'fileName',
									title : '文件名称',
									width : 120,
									height : 'auto',
									formatter : function(value, row, index) {
										return "<a href='#' class='easyui-linkbutton' onclick='AttachComponent.download(\""
												+ row.id
												+ "\")'>"
												+ value
												+ "</a>";
									}
								}, {
									field : 'filePath',
									title : '上传路径',
									width : 200,
									height : 'auto'
								}, {
									field : 'createBy',
									title : '上传人',
									width : 120,
									height : 'auto'
								}, {
									field : 'creatTime',
									title : '上传时间',
									width : 240,
									height : 'auto',
									formatter : function(value, row, index) {
										return timeLongToString(value);
									}
								} ] ]
					});

};
AttachComponent.prototype.editDom = function() {
	if (this.value == null || this.value == undefined || this.value == "") {
		this.value = "";
	}
	var domHtml = new com.isprint.utils.StringBuilder();
	domHtml.append("<div style='clear:both;padding-top:5px;'>");
	domHtml.append("<div class='easyui-panel' title='附件上传' > ");
	domHtml
			.append("<table cellspacing='0' cellpadding='0' style='border: 0px;padding:5px'>");
	domHtml.append("<tr style='height:25px'>");
	domHtml.append("<th><label for='Attachment_GUID'>附件上传：</label></th><td>");
	domHtml.append("<div>");
	domHtml
			.append("<input class='easyui-validatebox' type='hidden' id='Attachment_GUID' name='Attachment_GUID' />");
	domHtml.append("<input id='" + this.fieldId
			+ "' name='file' type='file' multiple='multiple'>");
	domHtml
			.append("<a href='javascript:void(0)' class='easyui-linkbutton' id='btnUpload' data-options='plain:true,iconCls:\"icon-save\"' onclick='AttachComponent.prototype.ajaxFileUpload(\""
					+ this.fieldId + "\")'>上传</a>");
	domHtml.append("<div id='fileQueue' class='fileQueue'></div>");
	domHtml.append("<div id='div_files'></div>");
	domHtml.append("<br />");
	domHtml.append("</div>");
	domHtml.append("</td>");
	domHtml.append("</tr></table>");
	domHtml.append("<table id='uploadFileList'></table>");
	domHtml.append("</div>");
	domHtml.append("</div>");
	this.dom = $(domHtml.toString());

	var dom = this.dom;
	dom
			.find('#uploadFileList')
			.datagrid(
					{
						title : '附件上传列表信息',
						nowrap : false,
						striped : true,
						collapsible : false,
						remoteSort : true,
						idField : 'id',
						singleSelect : true,
						rownumbers : true,
						columns : [ [
								{
									field : 'id',
									title : 'ID',
									width : 120,
									hidden:true,
//									formatter : function(value, row, index) {
//										return "<a href='#' class='easyui-linkbutton' onclick='AttachComponent.download(\""
//												+ value
//												+ "\")'>"
//												+ value
//												+ "</a>";
//									}
								}, {
									field : 'fileName',
									title : '文件名称',
									width : 120,
									height : 'auto',
									formatter : function(value, row, index) {
										return "<a href='#' class='easyui-linkbutton' onclick='AttachComponent.download(\""
												+ row.id
												+ "\")'>"
												+ value
												+ "</a>";
									}
								}, {
									field : 'filePath',
									title : '上传路径',
									width : 200,
									height : 'auto'
								}, {
									field : 'createBy',
									title : '上传人',
									width : 120,
									height : 'auto'
								}, {
									field : 'creatTime',
									title : '上传时间',
									width : 240,
									height : 'auto',
									formatter : function(value, row, index) {
										return timeLongToString(value);
									}
								} ] ]
					});
	this.uploadList = {};
	this.uploadList.Dom = dom.find('#uploadFileList');
	var uploadListData = this.value;
	this.uploadList.Dom.datagrid('loadData', []);
	this.uploadList.Dom.datagrid('loadData', uploadListData);
};
AttachComponent.download = function(id) {
	window.location.href = getWebContext() + "/api/file/download?fileId=" + id;
};

AttachComponent.prototype.approveDom = function() {
	if (this.value == null || this.value == undefined || this.value == "") {
		this.value = "";
	}
	if (this.value == null || this.value == undefined || this.value == "") {
		this.value = "";
	}
	var domHtml = new com.isprint.utils.StringBuilder();
	domHtml
			.append("<div style='clear:both;padding:5px 3px 5px 0px;width:99%;clear:both;height:auto;'>");
	domHtml.append("<table id='uploadFileList'></table>");
	domHtml.append("</div>");
	this.dom = $(domHtml.toString());
	var dom = this.dom;
	dom
			.find('#uploadFileList')
			.datagrid(
					{
						title : '附件上传列表信息',
						nowrap : false,
						striped : true,
						collapsible : false,
						remoteSort : true,
						idField : 'id',
						singleSelect : true,
						rownumbers : true,
						columns : [ [
								{
									field : 'id',
									title : 'ID',
									width : 120,
									hidden:true
//									formatter : function(value, row, index) {
//										return "<a href='#' class='' onclick='AttachComponent.download(\""
//												+ value
//												+ "\")'>"
//												+ value
//												+ "</a>";
//									}
								}, {
									field : 'fileName',
									title : '文件名称',
									width : 120,
									height : 'auto',
									formatter : function(value, row, index) {
										return "<a href='#' class='' onclick='AttachComponent.download(\""
												+ row.id
												+ "\")'>"
												+ value
												+ "</a>";
									}
								}, {
									field : 'filePath',
									title : '上传路径',
									width : 200,
									height : 'auto'
								}, {
									field : 'createBy',
									title : '上传人',
									width : 120,
									height : 'auto'
								}, {
									field : 'creatTime',
									title : '上传时间',
									width : 240,
									height : 'auto',
									formatter : function(value, row, index) {
										return timeLongToString(value);
									}
								} ] ]

					});

	this.uploadList = {};
	this.uploadList.Dom = dom.find('#uploadFileList');
	var uploadListData = this.value;
	this.uploadList.Dom.datagrid('loadData', []);
	if (uploadListData && uploadListData.length > 0) {
		this.uploadList.Dom.datagrid('loadData', uploadListData);
	}
};


AttachComponent.prototype.ajaxFileUpload = function(fieldId) {
	var uploadUrl = getWebContext() + '/api/file/upload';

	$.ajaxFileUpload({
		url : uploadUrl,// 用于文件上传的服务器端请求地址
		secureuri : false,// 一般设置为false
		type : 'post',
		fileElementId : fieldId,// 文件上传空间的id属性 <input type="file" id="file"
								// name="file" />
		dataType : 'json', // 返回值类型 一般设置为json
		success : function(data, status) { // 服务器成功响应处理函数
			if (data) {
				var rows = $("#uploadFileList").datagrid("getRows");
				var index = rows.length;
				var obj = data.file;
				$('#uploadFileList').datagrid('insertRow', {
					index : (index + 1),
					row : {
						id : obj.id,
						fileName : obj.fileName,
						filePath : obj.filePath,
						createBy : obj.createBy,
						creatTime : obj.creatTime
					}
				});
			} else {
				alert("添加失败！");
			}
		},
		error : function(data, status, e) {
			/** 服务器响应失败处理函数* */
			alert(e);
		}
	});
};
AttachComponent.prototype.processData = function() {
	var self = this;
	var dom = this.getDom();
	var uploadList = [];
	var dataList = dom.find("#uploadFileList").datagrid('getData').rows;
	if (dataList != undefined && dataList != null) {
		for ( var i = 0; i < dataList.length; ++i) {
			if (dataList != null)
				uploadList.push(dataList[i]);
		}
		return JSON.stringify(uploadList);
	} else {
		return "[]";
	}

};

附件上传功能还可以，但在IE和谷歌还会有一些问题。