项目上使用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\"' οnclick='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' οnclick='AttachComponent.download(\""
// + value
// + "\")'>"
// + value
// + "</a>";
// }
}, {
field : 'fileName',
title : '文件名称',
width : 120,
height : 'auto',
formatter : function(value, row, index) {
return "<a href='#' class='easyui-linkbutton' οnclick='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\"' οnclick='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' οnclick='AttachComponent.download(\""
// + value
// + "\")'>"
// + value
// + "</a>";
// }
}, {
field : 'fileName',
title : '文件名称',
width : 120,
height : 'auto',
formatter : function(value, row, index) {
return "<a href='#' class='easyui-linkbutton' οnclick='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='' οnclick='AttachComponent.download(\""
// + value
// + "\")'>"
// + value
// + "</a>";
// }
}, {
field : 'fileName',
title : '文件名称',
width : 120,
height : 'auto',
formatter : function(value, row, index) {
return "<a href='#' class='' οnclick='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和谷歌还会有一些问题。