一、大概思路
1.1、Asp.net的FileUpload控件的文件上传
1.2、Extjs的文件上传
二、数据库（暂无）
三、新建一个网站
3.1、Default.aspx代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>
<script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>
<script src="ext-3.2.0/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
<link href="UploadFile/fileuploadfield.css" rel="stylesheet" type="text/css"/>
<script src="UploadFile/FileUpLoadField.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget ='side';
Ext.onReady(function() {
var form =new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 80,
url: 'upload.ashx',
fileUpload: true,
defaultType: 'textfield',
items: [{
xtype: 'textfield',
fieldLabel: 'File Name',
name: 'userfile',
inputType: 'file',
allowBlank: false,
blankText: 'File can\'t not empty.',
anchor: '90%'// anchor width by percentage
}]
});
var win =new Ext.Window({
title: 'Upload file',
400,
height: 200,
minWidth: 300,
minHeight: 100,
layout: 'fit',
plain: true,
bodyStyle: 'padding:5px;',
buttonAlign: 'center',
items: form,
buttons: [{
text: 'Upload',
handler: function() {
if (form.form.isValid()) {
Ext.MessageBox.show({
title: 'Please wait',
msg: 'Uploading...',
progressText: '',
300,
progress: true,
closable: false,
animEl: 'loding'
});
form.getForm().submit({
success: function(form, action) {
Ext.Msg.alert('Message from extjs.org.cn', action.result.msg);
win.hide();
},
failure: function() {
Ext.Msg.alert('Error', 'File upload failure.');
}
})
}
}
}, {
text: 'Close',
handler: function() { win.hide(); }
}]
});
win.show();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server"/>
<asp:Button ID="Button1" runat="server"
Text="上传" onclick="Button1_Click"/>
</div>
<asp:Image ID="Image1" runat="server"/><br />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</form>
</body>
</html>
3.2、Default.aspx.cs代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
publicpartialclass _Default : System.Web.UI.Page
{
protectedvoid Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
}
protectedvoid Button1_Click(object sender, EventArgs e)
{
/** 文件是否为空 **/
bool fileIsValid =false;
if (FileUpload1.HasFile)
{
/** 获取上传文件的后缀 **/
string fileExtension = System.IO.Path.GetExtension(FileUpload1.FileName).ToLower();
string[] restrictExtension = { ".gif", ".jpg", ".bmp", ".png" };
/** 判断文件类型是否符合要求 **/
for (int i =0; i < restrictExtension.Length; i++)
{
if (fileExtension == restrictExtension[i])
{
fileIsValid =true;
}
}
}
/** 如果文件类型符合要求，调用SaveAs方法实现上传，并显示相关信息 **/
if (fileIsValid ==true)
{
try
{
Image1.ImageUrl ="~/"+ FileUpload1.FileName;
FileUpload1.SaveAs(Server.MapPath("~/") + FileUpload1.FileName);
Label1.Text="文件上传成功";
Label1.Text+="<br />";
Label1.Text+="<li>"+"原文件路径："+FileUpload1.PostedFile.FileName;
Label1.Text+="<br />";
Label1.Text+="<li>"+"文件大小："+FileUpload1.PostedFile.ContentLength+"字节";
Label1.Text+="<br />";
Label1.Text+="<li>"+"文件类型："+FileUpload1.PostedFile.ContentType;
}
catch
{
Label1.Text="文件上传成功";
}
}
else
{
Label1.Text="只能够上传后缀为.gif,.jpg,.bmp,.png的文件夹";
}
}
}
3.3、upload.ashx代码
<%@ WebHandler Language="C#" Class="upload"%>
using System;
using System.Web;
using System.IO;
publicclass upload : IHttpHandler
{
publicvoid ProcessRequest(HttpContext context)
{
context.Response.ContentType ="text/html";
UpLoadImage(context);
}
string serverpath ="";
string savepath ="";
privatestring json ="";
publicvoid UpLoadImage(HttpContext content)
{
try
{
if (content.Request.Files.Count >0)
{
HttpPostedFile postedFile = content.Request.Files[0];
serverpath = content.Server.MapPath("~/");
savepath = serverpath + Path.GetFileName(postedFile.FileName);
if (File.Exists(savepath))
{
json ="{success:false,'msg':'该图片已经存在！'}";
}
else
{
postedFile.SaveAs(savepath);
json ="{success:true,'msg':'上传成功！'}";
}
}
else
{
json ="{success:false,'msg':'获取文件异常！'}";
}
}
catch (Exception ex)
{
json ="{success:false,'msg':'"+ ex.Message +"！'}";
}
content.Response.Write(json);
content.Response.End();
}
publicbool IsReusable
{
get
{
returnfalse;
}
}
}
四、效果演示
五、总结
上传方面比较写得比较简单些（还可以扩展一些文件上的存储），像一些博客发表文章、数据库存储（图片名称、访问路径）还有编辑自己头像等等，判断稍微有些复杂，不过花些时间应该也不会太难。
六、源代码提供
6.1、运行环境
系统：Win7
IDE工具：VS2008
版本：.net framework3.5
Extjs版本：Extjs 3.2.0
6.2、源代码
Asp.net上传文件Demo:https://files.cnblogs.com/yongfeng/Asp.net%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0Demo.rar
