在小白的学习extjs的过程中,如果需要了解多文件的上传功能,也可以查看小白的上篇随笔,希望给大家帮助。http://www.cnblogs.com/wangqc/p/extjsFileUpload.html
知道下载这个功能(在下载的同时,要重命名文件,因为大多数保存到后台的文件都是通过生成不同的guid的,从而保证后台上传的文件不会将原来的文件覆盖,导致文件丢失的问题。因此后台保存的文件都是guid+原来的后缀名保存到服务器上的。)肯定是要遇到的,虽然大部分是后台代码,但是小白还是来总结一下,给需要的朋友。首先,就是在extjs中的超链接的应用,可以通过在渲染的时候,返回html的超链接(renderer)。效果图如下:
function DownFile(rowIndex)
{
var record = Ext.getCmp("FileGrid").getStore().getAt(rowIndex);
window.location.href = path+'ONotice/DownFile?uid='+uid+"&fileName="+record.get("RealFileName")+"&filePath="+record.get("FileDir");
} var store = Ext.create('Ext.data.Store', {
autoLoad:true,
proxy: {
type: 'ajax',
url: path+'ONotice/GetAllFiles',
reader: {
type: 'json',
root: 'rows',
idProperty: 'ID'
},
extraParams: { "uid":uid,"ID":ID}
},
fields:['RealFileName', 'FileDir','FileSize'],
autoload:true,
}); {
style:'margin-top:6px',
xtype: 'gridpanel',
fieldLabel: "",
id: 'FileGrid',
store:store,
columns: [
{ header: '文件名', dataIndex: 'RealFileName',align: 'center',width:180 },
{ header: '文件大小', dataIndex: 'FileSize',align: 'center',width:100 },
{ header: '文件路径', dataIndex: 'FileDir',align: 'center', flex:1,hidden:true },
{
header: "操作",
width: 71,
sortable: false,
align: 'center',
renderer:function(value,cellmeta,record, rowIndex, columnIndex, store){
return "<a class='editClass' onclick='DownFile("+rowIndex+")'>下载</a>"
}
}
],
width:370,
height:110
}
后台方法:也是自我感觉比较简单的一种(改变命名)。
public void DownFile(string fileName,string filePath)
{
FileStream fs = new FileStream(filePath, FileMode.Open);
byte[] bytes = new byte[(int)fs.Length];
fs.Read(bytes, 0, bytes.Length);
fs.Close();
System.Web.HttpContext.Current.Response.ContentType = "application/octet-stream";
//通知浏览器下载文件而不是打开
System.Web.HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8));
System.Web.HttpContext.Current.Response.BinaryWrite(bytes);
System.Web.HttpContext.Current.Response.Flush();
System.Web.HttpContext.Current.Response.End();
}