asp.net上传图片，保存文件名和路径，并利用javascript显示图片预览
FileUpload控件
属性:
FileName: 获取上传的文件名
HasFile: 是否选择(存在)上传的文件
ContentLength: 获得上窜文件的大小,单位是字节(byte)
方法:
Server.MapPath(): 获取服务器上的物理路径
SaveAs(): 保存文件到指定的文件夹
注意:默认情况下限制上传文件大小为4MB,通过web.config.comments(这个设置是全局的配置)可以修改其默认设置
或者通过修改web.config文件来改变应用程序上传限制.
<httpRuntime maxRequestLength="10240" executionTimeout="150" enable="true"/>
元素解释:
maxRequestLength: 设置上传文件大小,单位是kb.
executionTimeout: 允许执行请求的最大秒数,此功能必须在Compilation元素中Debug属性为false时才生效.
enable: 指定是否在当前的节点及子节点级别启用应用程序域 (AppDomain)，以接受传入的请求。如果为 False，则实际上关闭了该应用程序。默认值为 True.
通俗的说就是：是否允许用户访问该网站(是否允许Http请求)
注意:如果上传文件超过maxRequestLength大小,会出现页面无法显示的情况.
检查文件上传类型:
1).客户端检查(javascript实现)（在控件中使用onclientclick <asp:Button ID="Button1" runat="server" onclick="Button1_Click" OnClientClick="checkType()" Text="上傳" />）
2).服务器端检查
<script type="text/javascript" language="javascript">
function checkType() {
//得到上传文件的值
var fileName = document.getElementById("FileUpLoad1").value;
//返回String对象中子字符串最后出现的位置.
var seat = fileName.lastIndexOf(".");
//返回位于String对象中指定位置的子字符串并转换为小写.
var extension = fileName.substring(seat).toLowerCase();
//判断允许上传的文件格式
//if(extension!=".jpg"&&extension!=".jpeg"&&extension!=".gif"&&extension!=".png"&&extension!=".bmp"){
//alert("不支持"+extension+"文件的上传!");
//return false;
//}else{
//return true;
//}
var allowed = [".jpg", ".gif", ".png", ".bmp", ".jpeg"];
for (var i = 0; i < allowed.length; i++) {
if (!(allowed[i] != extension)) {
return true;
}
}
alert("不支持" + extension + "格式");
return false;
}
</script>控件代码：
<asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show1(this.value)" />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" OnClientClick="checkType()" Text="上傳" />上传按钮事件：
protected void Button1_Click(object sender, EventArgs e)
{
string constr = ConfigurationManager.ConnectionStrings["SqlConnection"].ConnectionString;
con = new SqlConnection(constr);
if (this.FileUpload1.HasFile)
{
//
// string strName = FileUpload1.PostedFile.FileName; //使用FileUpload控件获取上传文件的文件名，FileUpload1为控件的ID
// if (strName != "") //如果文件名存在
// {
// int i = strName.LastIndexOf(".");//获取“.“的索引顺序号
// string ext = strName.Substring(i);//获取文件扩展名
// string newName = Guid.NewGuid().ToString();//生成新的文件名，保证唯一性
// string relativePath = "admin\\images";//设置文件相对网站根目录的保存路径
// string absolutePath = Server.MapPath("~\\admin\\images"); //得到文件保存绝对路径
//if (!Directory.Exists(absolutePath))//如果images不存在，就创建
//{
// Directory.CreateDirectory(absolutePath);//创建文件images
//}
// string newFileName = absolutePath + "\\" + newName + ext;//得到带新文件名的完整物理路径
// fileUpload.PostedFile.SaveAs(newFileName);//图片存储到服务器
// txtImageUrl.Text = relativePath + "\\" + newName + ext;//包含相对路径的图片名
// }
//判断文件是否小于10Mb
if (this.FileUpload1.PostedFile.ContentLength < 10485760)
{
try
{
//上传文件并指定上传目录的路径
this.FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Img/")
+ this.FileUpload1.FileName);
/*注意->这里为什么不是:FileUpLoad1.PostedFile.FileName
* 而是:FileUpLoad1.FileName?
* 前者是获得客户端完整限定(客户端完整路径)名称
* 后者FileUpLoad1.FileName只获得文件名.
*/
//当然上传语句也可以这样写(貌似废话):
//FileUpLoad1.SaveAs(@"D:\"+FileUpLoad1.FileName);
this.Label1.Text = "上传成功!";
string sql = string.Format("insert into Img(ImgUrl,ImgSize,ImgName) values('{0}','{1}','{2}')", Server.MapPath("~/Img/") + this.FileUpload1.FileName, this.FileUpload1.PostedFile.ContentLength, this.FileUpload1.FileName);
SqlCommand cmd = con.CreateCommand();
cmd.CommandText = sql;
con.Open();
SqlTransaction tran = con.BeginTransaction();
cmd.Transaction = tran;
int i=0;
try
{
i= cmd.ExecuteNonQuery();
tran.Commit();
}
catch(Exception ex)
{
tran.Rollback();
}
finally
{
con.Close();
}
if (i == 1)
{
this.Response.Write("<Script Language='JavaScript'>window.alert('上傳團片" + i.ToString() + "張')</script>");
}
}
catch (Exception ex)
{
this.Label1.Text = "出现异常,无法上传!";
//lblMessage.Text += ex.Message;
}
}
else
{
this.Label1.Text = "上传文件不能大于10MB!";
}
}
else
{
this.Label1.Text = "尚未选择文件!";
}
}
图片产生预览效果
<asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)"/>
<asp:Image ID="Image1" runat="server" />
在上传控件中写onpropertychange="show(this.value)"事件并调用js中的show函数并将自身的参数传进js.（显示原图片，选择图片后就会产生，不用点上传按钮）
<script type="text/javascript">
function show(id)
{
document.getElementById("Image1").src=id;
}
</script>下面代码用于显示缩略图的地方：
</div> <div id="divview" WIDTH: 166px; HEIGHT: 190px"> </div>下面显示缩略图的js代码
<script type="text/javascript">
function show1(upimg)
{
var dd=document.getElementById("divview");
dd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upimg;
dd.style.width = 166;
dd.style.height = 190;
dd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
}
</script>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="文件上传.aspx.cs" Inherits="文件上传" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show1(this.value)" />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" OnClientClick="checkType()" Text="上傳" />
<script type="text/javascript">
function show(id)
{
document.getElementById("Image1").src=id;
}
</script>
<script type="text/javascript">
function show1(upimg)
{
var dd=document.getElementById("divview");
dd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upimg;
dd.style.width = 166;
dd.style.height = 190;
dd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
}
</script>
<script type="text/javascript" language="javascript">
function checkType() {
//得到上传文件的值
var fileName = document.getElementById("FileUpLoad1").value;
//返回String对象中子字符串最后出现的位置.
var seat = fileName.lastIndexOf(".");
//返回位于String对象中指定位置的子字符串并转换为小写.
var extension = fileName.substring(seat).toLowerCase();
//判断允许上传的文件格式
//if(extension!=".jpg"&&extension!=".jpeg"&&extension!=".gif"&&extension!=".png"&&extension!=".bmp"){
//alert("不支持"+extension+"文件的上传!");
//return false;
//}else{
//return true;
//}
var allowed = [".jpg", ".gif", ".png", ".bmp", ".jpeg"];
for (var i = 0; i < allowed.length; i++) {
if (!(allowed[i] != extension)) {
return true;
}
}
alert("不支持" + extension + "格式");
return false;
}
</script>
</div>
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div>
<asp:Image ID="Image1" runat="server" />
</div>
<div id="divview" WIDTH: 166px; HEIGHT: 190px">
</div>
</form>
</body>
</html>
完整的ASPX.CS文件
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
public partial class 文件上传 : System.Web.UI.Page
{
SqlConnection con;
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
string constr = ConfigurationManager.ConnectionStrings["SqlConnection"].ConnectionString;
con = new SqlConnection(constr);
if (this.FileUpload1.HasFile)
{
//
// string strName = FileUpload1.PostedFile.FileName; //使用FileUpload控件获取上传文件的文件名，FileUpload1为控件的ID
// if (strName != "") //如果文件名存在
// {
// int i = strName.LastIndexOf(".");//获取“.“的索引顺序号
// string ext = strName.Substring(i);//获取文件扩展名
// string newName = Guid.NewGuid().ToString();//生成新的文件名，保证唯一性
// string relativePath = "admin\\images";//设置文件相对网站根目录的保存路径
// string absolutePath = Server.MapPath("~\\admin\\images"); //得到文件保存绝对路径
//if (!Directory.Exists(absolutePath))//如果images不存在，就创建
//{
// Directory.CreateDirectory(absolutePath);//创建文件images
//}
// string newFileName = absolutePath + "\\" + newName + ext;//得到带新文件名的完整物理路径
// fileUpload.PostedFile.SaveAs(newFileName);//图片存储到服务器
// txtImageUrl.Text = relativePath + "\\" + newName + ext;//包含相对路径的图片名
// }
//判断文件是否小于10Mb
if (this.FileUpload1.PostedFile.ContentLength < 10485760)
{
try
{
//上传文件并指定上传目录的路径
this.FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Img/")
+ this.FileUpload1.FileName);
/*注意->这里为什么不是:FileUpLoad1.PostedFile.FileName
* 而是:FileUpLoad1.FileName?
* 前者是获得客户端完整限定(客户端完整路径)名称
* 后者FileUpLoad1.FileName只获得文件名.
*/
//当然上传语句也可以这样写(貌似废话):
//FileUpLoad1.SaveAs(@"D:\"+FileUpLoad1.FileName);
this.Label1.Text = "上传成功!";
string sql = string.Format("insert into Img(ImgUrl,ImgSize,ImgName) values('{0}','{1}','{2}')", Server.MapPath("~/Img/") + this.FileUpload1.FileName, this.FileUpload1.PostedFile.ContentLength, this.FileUpload1.FileName);
SqlCommand cmd = con.CreateCommand();
cmd.CommandText = sql;
con.Open();
SqlTransaction tran = con.BeginTransaction();
cmd.Transaction = tran;
int i=0;
try
{
i= cmd.ExecuteNonQuery();
tran.Commit();
}
catch(Exception ex)
{
tran.Rollback();
}
finally
{
con.Close();
}
if (i == 1)
{
this.Response.Write("<Script Language='JavaScript'>window.alert('上傳團片" + i.ToString() + "張')</script>");
}
}
catch (Exception ex)
{
this.Label1.Text = "出现异常,无法上传!";
//lblMessage.Text += ex.Message;
}
}
else
{
this.Label1.Text = "上传文件不能大于10MB!";
}
}
else
{
this.Label1.Text = "尚未选择文件!";
}
}
}