预实现效果:(上传文件,此处为图片,去掉图片验证,可以上传其他文件)
页面代码:
代码
<%@ Page language="c#" Codebehind="testAdd.aspx.cs" AutoEventWireup="false" Inherits="DevSec.DH.Ums.DH.school.testAdd" %>
<HTML>
<HEAD>
<title>NewsEdit</title>
<meta content="False" name="vs_showGrid">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</LINK>
<script language="javascript">
function OnChanagePic()
{
var fileImage = document.getElementById("fileImage");
/* 判断文件的扩展名称 */
var extName =".gif,.bmp,.jpg,.png";
if(fileImage.value.length != 0)
{
var fileExt = fileImage.value.substr(fileImage.value.length - 4).toLowerCase();
//alert(extName.indexOf(fileExt));
if(extName.indexOf(fileExt) == -1)
{
alert("上传的文件不正确！\r\n\r\n上传的文件应为：" + extName + "！");
window.event.returnValue = false;
return false;
}
document.getElementById("imgBrowser").src = fileImage.value;
}
}
</script>
</HEAD>
<body>
<form id="FormNewsEdit" method="post" runat="server">
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td align="center" height="26">
<table width="100%" border="0" class="DataGrid">
<tr>
<td noWrap colSpan="4" height="26">
<fieldset>
<legend>
选择图片
</legend>
<table width="100%">
<tr>
<td><input id="fileImage" style="WIDTH:100%;CURSOR:hand" onChange="javascript:OnChanagePic();"
type="file" runat="server" class="inputCss" contentEditable="false" NAME="fileImage"></td>
</tr>
<tr>
<td align="center">
<asp:image id="imgBrowser" runat="server" ImageUrl="default.jpg" ImageAlign="AbsMiddle"
ToolTip="图片预览" Width="120" Height="90"></asp:image></td>
</tr>
</table>
</fieldset>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td vAlign="bottom" align="center" height="30">
<asp:Button id="btnOkContinue" runat="server" Text="保存并继续" ActIndex="1"> </asp:Button>
</tr>
</table>
</form>
</body>
</HTML>
<HTML>
<HEAD>
<title>NewsEdit</title>
<meta content="False" name="vs_showGrid">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</LINK>
<script language="javascript">
function OnChanagePic()
{
var fileImage = document.getElementById("fileImage");
/* 判断文件的扩展名称 */
var extName =".gif,.bmp,.jpg,.png";
if(fileImage.value.length != 0)
{
var fileExt = fileImage.value.substr(fileImage.value.length - 4).toLowerCase();
//alert(extName.indexOf(fileExt));
if(extName.indexOf(fileExt) == -1)
{
alert("上传的文件不正确！\r\n\r\n上传的文件应为：" + extName + "！");
window.event.returnValue = false;
return false;
}
document.getElementById("imgBrowser").src = fileImage.value;
}
}
</script>
</HEAD>
<body>
<form id="FormNewsEdit" method="post" runat="server">
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td align="center" height="26">
<table width="100%" border="0" class="DataGrid">
<tr>
<td noWrap colSpan="4" height="26">
<fieldset>
<legend>
选择图片
</legend>
<table width="100%">
<tr>
<td><input id="fileImage" style="WIDTH:100%;CURSOR:hand" onChange="javascript:OnChanagePic();"
type="file" runat="server" class="inputCss" contentEditable="false" NAME="fileImage"></td>
</tr>
<tr>
<td align="center">
<asp:image id="imgBrowser" runat="server" ImageUrl="default.jpg" ImageAlign="AbsMiddle"
ToolTip="图片预览" Width="120" Height="90"></asp:image></td>
</tr>
</table>
</fieldset>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td vAlign="bottom" align="center" height="30">
<asp:Button id="btnOkContinue" runat="server" Text="保存并继续" ActIndex="1"> </asp:Button>
</tr>
</table>
</form>
</body>
</HTML>
ps(说明):
(1)html的fieldset空间,类似panel框
<fieldset>
<legend>
标题
</legend>
内容
</fieldset>
<legend>
标题
</legend>
内容
</fieldset>
(2)htmlInputFile,<input id="cs中定义的名称" type = "file">即可出现附带浏览按钮的input框
<input id="fileImage" style="WIDTH:100% CURSOR:hand" onChange="javascript:OnChanagePic();" type="file" runat="server" class="inputCss" contentEditable="false" NAME="fileImage">
为此框,指定OnChanagePic()函数调用,验证是否为所想要的文件类型
(3) 页面中使用了img控件,以便用户浏览图片,可以根据页面情况修改图片长宽..
<asp:image id="imgBrowser" runat="server" ImageUrl="default.jpg" ImageAlign="AbsMiddle" ToolTip="图片预览" Width="120" Height="90"></asp:image>
在OnChanagePic()函数中,var fileImage = document.getElementById("fileImage");document.getElementById("imgBrowser").src = fileImage.value;设置img的图片地址..
(4)为img指定了默认图片ImageUrl="default.jpg",否则会显示各差号!
后台代码:
代码using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace DevSec.DH.Ums.DH.school
{
/// <summary>
/// testAdd 的摘要说明。
/// </summary>
public class testAdd : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Image imgBrowser;
protected System.Web.UI.WebControls.Button btnOkContinue;
protected System.Web.UI.HtmlControls.HtmlInputFile fileImage;
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.btnOkContinue.Click += new System.EventHandler(this.btnOkContinue_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
/// <summary>
/// 保存按钮事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void btnOkContinue_Click(object sender, System.EventArgs e)
{
string str_res = this.updateImage(this.fileImage);
this.Response.Write("<script> alert('"+str_res+"');</script>");
}
/// <summary>
/// 客户端上传图片发至服务器指定文件夹
/// 并获得保存至服务器的文件名称
/// </summary>
/// <param name="file">客户端HtmlInputFile控件的对象</param>
/// <returns>如果成功返回相对路径字符串否则为错误提示字符串</returns>
public string updateImage(System.Web.UI.HtmlControls.HtmlInputFile file)
{
//要验证的文件格式
string [] imgType = new string[] { "image/gif", "image/pjpeg", "image/png", "image/bmp" };
int i = 0;
bool blean = false;
string message = string.Empty;
//判断是否为Image类型文件
while(i<imgType.Length)
{
if(file.PostedFile.ContentType.Equals(imgType[i].ToString()))
{
blean = true;
break;
}
else if(i == (imgType.Length - 1))
{
break;
}
else
{
i++;
}
}
//对获得的路径进行分析处理
switch(blean)
{
case true:
//服务器路径
string serverpath = System.Web.HttpContext.Current.Server.MapPath(".")+"//";
//上传和返回(保存到数据库中)的路径
string uppath = string.Empty,savepath = string.Empty;
//创建图片新的名称
string nameImg = DateTime.Now.ToString("new"+"yyyyMMddHHmmss");
//获得上传图片的路径
string strPath = file.Value;
//获得上传图片的类型(后缀名)
string type = strPath.Substring(strPath.LastIndexOf(".")+1).ToLower();
//拼写数据库保存的相对路径字符串
savepath = nameImg + "."+ type;
//拼写上传图片的路径(假设放在项目下的uploads文件夹内,且假设uploads文件夹存在,否则报错)
uppath = System.Web.HttpContext.Current.Server.MapPath("~/");
uppath += "uploads/";
uppath += nameImg + "." + type;
//上传图片
file.PostedFile.SaveAs(uppath);
message = "上传成功,文件名:"+savepath;
break;
case false:
message = "您上传的类型有错,请重新选择！";
break;
default:break;
}
return message;
}
}
}
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace DevSec.DH.Ums.DH.school
{
/// <summary>
/// testAdd 的摘要说明。
/// </summary>
public class testAdd : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Image imgBrowser;
protected System.Web.UI.WebControls.Button btnOkContinue;
protected System.Web.UI.HtmlControls.HtmlInputFile fileImage;
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.btnOkContinue.Click += new System.EventHandler(this.btnOkContinue_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
/// <summary>
/// 保存按钮事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void btnOkContinue_Click(object sender, System.EventArgs e)
{
string str_res = this.updateImage(this.fileImage);
this.Response.Write("<script> alert('"+str_res+"');</script>");
}
/// <summary>
/// 客户端上传图片发至服务器指定文件夹
/// 并获得保存至服务器的文件名称
/// </summary>
/// <param name="file">客户端HtmlInputFile控件的对象</param>
/// <returns>如果成功返回相对路径字符串否则为错误提示字符串</returns>
public string updateImage(System.Web.UI.HtmlControls.HtmlInputFile file)
{
//要验证的文件格式
string [] imgType = new string[] { "image/gif", "image/pjpeg", "image/png", "image/bmp" };
int i = 0;
bool blean = false;
string message = string.Empty;
//判断是否为Image类型文件
while(i<imgType.Length)
{
if(file.PostedFile.ContentType.Equals(imgType[i].ToString()))
{
blean = true;
break;
}
else if(i == (imgType.Length - 1))
{
break;
}
else
{
i++;
}
}
//对获得的路径进行分析处理
switch(blean)
{
case true:
//服务器路径
string serverpath = System.Web.HttpContext.Current.Server.MapPath(".")+"//";
//上传和返回(保存到数据库中)的路径
string uppath = string.Empty,savepath = string.Empty;
//创建图片新的名称
string nameImg = DateTime.Now.ToString("new"+"yyyyMMddHHmmss");
//获得上传图片的路径
string strPath = file.Value;
//获得上传图片的类型(后缀名)
string type = strPath.Substring(strPath.LastIndexOf(".")+1).ToLower();
//拼写数据库保存的相对路径字符串
savepath = nameImg + "."+ type;
//拼写上传图片的路径(假设放在项目下的uploads文件夹内,且假设uploads文件夹存在,否则报错)
uppath = System.Web.HttpContext.Current.Server.MapPath("~/");
uppath += "uploads/";
uppath += nameImg + "." + type;
//上传图片
file.PostedFile.SaveAs(uppath);
message = "上传成功,文件名:"+savepath;
break;
case false:
message = "您上传的类型有错,请重新选择！";
break;
default:break;
}
return message;
}
}
}
ps:
(1)为页面按钮添加click事件,并调用方法 updateImage(fileImage),参数名称为HtmlInputFile的id
(2)主要方法:file.PostedFile.SaveAs(uppath); uppath为保存路径!
疑问::
上传的明明是jpg图片,而调用方法file.PostedFile.ContentType返回的确是image/pjpeg,不知道为啥?