预实现效果:(上传文件,此处为图片,去掉图片验证,可以上传其他文件)
页面代码:
< 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框
< legend >
标题
</ legend >
内容
</ fieldset >
(2)htmlInputFile,<input id="cs中定义的名称" type = "file">即可出现附带浏览按钮的input框
为此框,指定OnChanagePic()函数调用,验证是否为所想要的文件类型
(3) 页面中使用了img控件,以便用户浏览图片,可以根据页面情况修改图片长宽..
在OnChanagePic()函数中,var fileImage = document.getElementById("fileImage");document.getElementById("imgBrowser").src = fileImage.value;设置img的图片地址..
(4)为img指定了默认图片ImageUrl="default.jpg",否则会显示各差号!
后台代码:
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,不知道为啥?