在开发Web应用时，预览图片是一项常见的需求，特别是在上传图片功能中，用户往往希望在正式提交前能够看到即将上传的图片效果。本教程将详细讲解如何使用C#、ASP.NET、jQuery、JavaScript（JS）来实现图片预览功能。
我们需要了解浏览器对文件API的支持，尤其是FileReader接口，它是实现图片预览的关键。FileReader允许我们读取用户选择的文件，并提供了多种读取方式，如读取成文本、二进制字符串或DataURL（数据URL），后者非常适合用于图片预览。
1. HTML部分：
创建一个input元素让用户选择图片，并添加一个img元素用于显示预览：
```html
<input type="file" id="imageInput" accept="image/*" />
<img id="previewImage" style="display:none;" />
```
2. JavaScript/jQuery部分：
当用户选择图片后，监听input元素的change事件，获取选中的文件，并使用FileReader读取：
```javascript
$(document).ready(function() {
$('#imageInput').on('change', function(e) {
var file = e.target.files[0];
if (file.type.startsWith('image/')) {
var reader = new FileReader();
reader.onload = function(event) {
$('#previewImage').attr('src', event.target.result);
$('#previewImage').show();
};
reader.readAsDataURL(file);
} else {
alert('请上传图片文件');
}
});
});
```
这段代码中，`readAsDataURL`方法读取文件为DataURL，当读取完成后，通过`onload`回调将结果设置到img元素的src属性，从而实现预览。
3. ASP.NET和C#部分：
在服务器端，我们可能需要处理图片的上传。ASP.NET提供了HttpPostedFileBase类来处理上传的文件。在表单提交后，可以获取上传的图片文件：
```csharp
protected void Page_Load(object sender, EventArgs e) {
if (IsPostBack) {
HttpPostedFileBase imageFile = Request.Files["imageInput"];
if (imageFile != null && imageFile.ContentLength > 0) {
// 这里可以处理图片，比如保存到服务器
}
}
}
```
总结起来，实现图片预览功能主要包括以下步骤：
1. 使用HTML创建文件输入控件和预览图片的img元素。
2. 使用JavaScript/jQuery监听文件输入控件的change事件，读取文件并转换为DataURL。
3. 将DataURL设置到img元素的src属性，显示预览。
4. 在服务器端，使用ASP.NET和C#处理图片上传。
这个功能适用于各种Web应用，比如在线编辑器、个人相册、电商平台等，提供友好的用户体验。同时，为了提高安全性，我们还需要对上传的文件进行验证，例如检查文件类型、大小等，防止恶意文件上传。
