1.EasyUI绑定一个文件列表和列表的菜单
<table id="bugImages_dg" data-options="fit:true">
</table>
<div id="bugImages_toolbar" class="datagrid-toolbar">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<a href="javascript:void(0);" class="l-btn l-btn-plain" onclick="bugImages_add()">
<span class="l-btn-left"><span class="l-btn-text icon-add l-btn-icon-left">上传</span></span>
</a>
</td>
<td>
<a href="javascript:void(0);" class="l-btn l-btn-plain" onclick="bugImages_download()">
<span class="l-btn-left"><span class="l-btn-text icon-application_edit l-btn-icon-left">下载</span></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
2.文件列表的绑定方法
function bugImageBind() {
var bugId = $("#hiddenBugId").val();
$("#bugImages_dg").datagrid({
url: "/BugImages/bugImagesJson.ashx" ,
queryParams: { uptype: 0, bugId: bugId },
striped: true, rownumbers: false, pagination: false, pageSize: 30, singleSelect: true,
idField: ‘Id‘,
sortName: ‘Id‘,
sortOrder: ‘desc‘,
pageList: [20, 30, 40, 60, 80, 100],
columns: [[
{ field: ‘imageId‘, title: ‘文件Id‘, hidden: true },
{ field: ‘bugId‘, title: ‘缺陷Id‘, hidden: true },
{ field: ‘text‘, title: ‘文件名称‘, width:250 },
{ field: ‘creatorId‘, title: ‘上传人Id‘, hidden: true },
{ field: ‘createDate‘, title: ‘上传时间‘, width: 150 }
]],
toolbar: ‘#bugImages_toolbar‘
});
$("#bugImages_dg").datagrid(‘clearSelections‘).datagrid(‘clearChecked‘);
}
3.Ajax上传所用的iframe表单
<div style="display: none;">
<form id="formUpload" name="formToUpload" method="post" action="" enctype="multipart/form-data" target="msgframe">
<input id="fileToUpload" type="file" size="45" name="fileToUpload" />
</form>
</div>
<iframe id="msgframe" name="msgframe" style="display: none;"></iframe>
<iframe id="downloadFrame" name="downloadFrame" style="display: none;" src=""></iframe>
4.选中文件的触发和上传方法
//缺陷附件上传
function bugImages_add() {
$("#fileToUpload").click();
var bugId = $("#hiddenBugId").val();
var user = $("#hiddenUser").val();
$("#formUpload").attr("action", "/BugImages/bugImagesJson.ashx?uptype=1&bugId=" + bugId + "&creatorId=" + user);
timeout = setTimeout("checkFile()", 1000);
}
var timeout;
function checkFile() {
var fileInput = $("#fileToUpload");
if (fileInput.val() == "" || fileInput.val() == null) {
timeout = setTimeout("checkFile()", 1000);
} else {
if (fileInput.get(0).files) {
var fileSize = fileInput.get(0).files[0].size;
if (fileSize > 2 * 1024 * 1024) {
alert(‘上传文件不能超过2M‘);
} else {
clearTimeout(timeout);
$("#formUpload").submit();
$("#fileToUpload").val("");
}
} else {
alert(‘附件上传不支持IE10以下版本浏览器‘);
clearTimeout(timeout);
$("#fileToUpload").val("");
}
}
}
5.上传服务器端处理
string s = string.Empty;
string msg = "window.parent.bugImageBind();";
string strReturn =
@"
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type=‘text/javascript‘>
@msg
</script>
</head>
<body>
</body>
</html>
";
try
{
var file = context.Request.Files["fileToUpload"];
//保存
if (file != null && file.ContentLength > 0 && file.ContentLength <= 2 * 1024 * 1024)
{
string[] ieBugStrings = file.FileName.Replace("\\", "&").Split(‘&‘);
string fileName = ieBugStrings[ieBugStrings.Length - 1];
string path = context.Server.MapPath("~") + "Upfiles\\" + fileName;
if (File.Exists(path))
File.Delete(path);
file.SaveAs(path);
FileStream fileStream = new FileStream(path, FileMode.Open, FileAccess.Read);
Byte[] byteData = new Byte[fileStream.Length];
fileStream.Read(byteData, 0, byteData.Length);
fileStream.Close();
bugImagesDataModel bug = new bugImagesDataModel();
bug.bugId = context.Request["bugId"];
bug.imageData = byteData;
bug.text = fileName;
bug.creatorId = context.Request["creatorId"];
bug.createDate = DateTime.Now;
using (BugImagesServiceClient svc = new BugImagesServiceClient())
{
svc.AddbugImages(bug, ref s);
}
if (File.Exists(path))
File.Delete(path);
}
else
{
msg = "alert(‘附件不能超过2M‘);";
}
}
catch (Exception ex)
{
msg = "alert(‘" + ex + "‘);";
}
context.Response.ContentType = "text/html";
context.Response.Write(strReturn.Replace("@msg", msg));
6.下载事件
function bugImages_download() {
var bugImage = $("#bugImages_dg").datagrid(‘getSelected‘);
if (bugImage) {
$("#downloadFrame").attr("src", "/BugImages/bugImagesJson.ashx?uptype=2&imageId=" + bugImage.imageId);
} else {
alert("请先选择要下载的附件");
}
}
7.下载服务器端处理
string imageId = context.Request["imageId"];
string s = string.Empty;
bugImagesDataModel[] models;
using (BugImagesServiceClient svc = new BugImagesServiceClient())
{
string searchString = "where imageId=‘" + imageId + "‘";
string orderString = "order by createDate desc";
models = svc.GetbugImagesDataList(searchString, orderString, 0, 10000, ref s);
}
if (models.Length > 0)
{
byte[] byteImg = models[0].imageData;
context.Response.Buffer = false;
context.Response.ContentType = "image/jpg";
context.Response.AddHeader("Content-Disposition", "attachment;filename=" + models[0].text);
context.Response.BinaryWrite(byteImg);//写入二进制流
context.Response.End();
}
时间： 2024-07-28 18:47:20