asp.net fileupload控件上传图片并预览图片

ASP.NET FileUpload控件上传图片并预览图片攻略

在ASP.NET应用程序中，FileUpload控件是一种用于上传文件的控件。本文将提供一个完整的攻略，包括如何使用FileUpload控件上传图片并预览图片。以下是详细步骤：

步骤1：创建ASP.NET Web Forms项目

首先，我们需要创建一个ASP.NET Web Forms项目。可以使用Visual Studio或者在命令行中创建。以下是一个示例说明，演示如何在Visual Studio中创建ASP.NET Web Forms项目：

1. 打开Visual Studio。
2. 选择“创建新项目”。
3. 在“新建项目”对话框中，选择“ASP.NET Web Forms应用程序”。
4. 输入项目名称和位置，然后单击“创建”按钮。

步骤2：添加FileUpload控件和预览图片控件

在创建ASP.NET Web Forms项目之后，我们需要添加FileUpload控件和预览图片控件。以下是一个示例说明，演示如何添加FileUpload控件和预览图片控件：

1. 在Web Forms页面中添加以下代码：

```html

```

在上面的代码中，我们添加了一个FileUpload控件和一个预览图片控件。FileUpload控件用于上传图片，预览图片控件用于显示上传的图片。

步骤3：处理上传图片并预览图片

在添加FileUpload控件和预览图片控件之后，我们需要处理上传图片并预览图片。以下是一个示例说明，演示如何处理上传图片并预览图片：

1. 在Web Forms页面的代码文件中添加以下代码：

csharp
protected void btnUpload_Click(object sender, EventArgs e)
{
if (fileUpload.HasFile)
{
string fileName = Path.GetFileName(fileUpload.PostedFile.FileName);
string fileExtension = Path.GetExtension(fileName);
if (fileExtension.ToLower() == ".jpg" || fileExtension.ToLower() == ".png")
{
string filePath = Server.MapPath("~/Uploads/" + fileName);
fileUpload.SaveAs(filePath);
imgPreview.ImageUrl = "~/Uploads/" + fileName;
}
else
{
Response.Write("只能上传jpg或png格式的图片！");
}
}
}

在上面的代码中，我们使用了FileUpload控件的HasFile属性来检查是否有文件上传。如果有文件上传，我们使用Path.GetFileName方法获取文件名，使用Path.GetExtension方法获取文件扩展名。如果文件扩展名是.jpg或.png，我们使用Server.MapPath方法获取文件路径，使用FileUpload.SaveAs方法保存文件，使用Image控件的ImageUrl属性来显示上传的图片。如果文件扩展名不是.jpg或.png，我们使用Response.Write方法输出错误信息。

示例1：上传图片并预览图片

在添加FileUpload控件和预览图片控件之后，我们可以上传图片并预览图片。以下是一个示例说明，演示如何上传图片并预览图片：

1. 在Web Forms页面中添加以下代码：

```html

```

1. 在Web Forms页面的代码文件中添加以下代码：

csharp
protected void btnUpload_Click(object sender, EventArgs e)
{
if (fileUpload.HasFile)
{
string fileName = Path.GetFileName(fileUpload.PostedFile.FileName);
string fileExtension = Path.GetExtension(fileName);
if (fileExtension.ToLower() == ".jpg" || fileExtension.ToLower() == ".png")
{
string filePath = Server.MapPath("~/Uploads/" + fileName);
fileUpload.SaveAs(filePath);
imgPreview.ImageUrl = "~/Uploads/" + fileName;
}
else
{
Response.Write("只能上传jpg或png格式的图片！");
}
}
}

在上面的代码中，我们添加了一个FileUpload控件和一个预览图片控件。FileUpload控件用于上传图片，预览图片控件用于显示上传的图片。在btnUpload_Click事件处理程序中，我们使用FileUpload控件的HasFile属性来检查是否有文件上传。如果有文件上传，我们使用Path.GetFileName方法获取文件名，使用Path.GetExtension方法获取文件扩展名。如果文件扩展名是.jpg或.png，我们使用Server.MapPath方法获取文件路径，使用FileUpload.SaveAs方法保存文件，使用Image控件的ImageUrl属性来显示上传的图片。如果文件扩展名不是.jpg或.png，我们使用Response.Write方法输出错误信息。

示例2：限制上传图片大小

在处理上传图片并预览图片之前，我们可以限制上传图片的大小。以下是一个示例说明，演示如何限制上传图片的大小：

1. 在Web Forms页面中添加以下代码：

```html

```

1. 在Web Forms页面的代码文件中添加以下代码：

```csharp
protected void btnUpload_Click(object sender, EventArgs e)
{
if (fileUpload.HasFile)
{
int fileSize = fileUpload.PostedFile.ContentLength;
if (fileSize > 1024 * 1024)
{
Response.Write("上传的图片不能超过1MB！");
return;
}

       string fileName = Path.GetFileName(fileUpload.PostedFile.FileName);
       string fileExtension = Path.GetExtension(fileName);
       if (fileExtension.ToLower() == ".jpg" || fileExtension.ToLower() == ".png")
       {
           string filePath = Server.MapPath("~/Uploads/" + fileName);
           fileUpload.SaveAs(filePath);
           imgPreview.ImageUrl = "~/Uploads/" + fileName;
       }
       else
       {
           Response.Write("只能上传jpg或png格式的图片！");
       }
   }

}
```

在上面的代码中，我们使用了FileUpload控件的PostedFile.ContentLength属性来获取上传文件的大小。如果上传文件的大小超过1MB，我们使用Response.Write方法输出错误信息并返回。如果上传文件的大小不超过1MB，我们继续处理上传图片并预览图片的逻辑。

结论

在本文中，我们提供了一个完整的攻略，包括如何使用FileUpload控件上传图片并预览图片。我们希望这些信息能够帮助您成功实现ASP.NET Web Forms应用程序中的图片上传和预览功能。