下面是关于“asp.net 自定义控件实现无刷新上传图片,立即显示缩略图,保存图片缩略图”的完整攻略，包含两个示例说明。
简介
在ASP.NET中，我们可以使用自定义控件来实现无刷新上传图片，并立即显示缩略图。我们可以使用FileUpload控件来上传图片，并使用Image控件来显示缩略图。在上传图片后，我们可以使用System.Drawing命名空间中的类来生成缩略图，并将其保存到服务器上。
实现步骤
以下是实现无刷新上传图片并立即显示缩略图的步骤：
- 创建自定义控件：
我们可以使用Visual Studio创建自定义控件。例如，我们可以创建名为"ImageUploader"的自定义控件。
- 添加FileUpload控件和Image控件：
我们需要在自定义控件中添加FileUpload控件和Image控件。可以使用以下代码添加控件：
<asp:FileUpload ID="fileUpload" runat="server" />
<asp:Image ID="imgThumbnail" runat="server" />
在上面的代码中，我们使用asp命名空间添加FileUpload控件和Image控件。
- 添加JavaScript代码：
我们需要添加JavaScript代码来实现无刷新上传图片。可以使用以下代码添加JavaScript代码：
<script type="text/javascript">
function uploadImage() {
var fileUpload = document.getElementById("fileUpload");
var imgThumbnail = document.getElementById("imgThumbnail");
var formData = new FormData();
formData.append("file", fileUpload.files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "UploadImage.ashx", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
imgThumbnail.src = xhr.responseText;
}
};
xhr.send(formData);
}
</script>
在上面的代码中，我们使用JavaScript代码来实现无刷新上传图片。我们使用XMLHttpRequest对象来发送POST请求，并在响应中设置Image控件的src属性。
- 添加上传处理程序：
我们需要添加上传处理程序来处理上传的图片。可以使用以下代码添加上传处理程序：
public class UploadImage : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
HttpPostedFile file = context.Request.Files["file"];
string fileName = Path.GetFileName(file.FileName);
string fileExtension = Path.GetExtension(fileName);
string newFileName = Guid.NewGuid().ToString() + fileExtension;
string thumbnailPath = context.Server.MapPath("~/thumbnails/" + newFileName);
using (var image = Image.FromStream(file.InputStream))
{
var thumbnail = image.GetThumbnailImage(100, 100, null, IntPtr.Zero);
thumbnail.Save(thumbnailPath);
}
context.Response.ContentType = "text/plain";
context.Response.Write("~/thumbnails/" + newFileName);
}
public bool IsReusable
{
get
{
return false;
}
}
}
在上面的代码中，我们使用IHttpHandler接口来实现上传处理程序。我们使用HttpPostedFile对象来获取上传的文件，并使用System.Drawing命名空间中的类来生成缩略图。最后，我们将缩略图保存到服务器上，并在响应中返回缩略图的路径。
- 添加事件处理程序：
我们需要添加事件处理程序来调用JavaScript代码。可以使用以下代码添加事件处理程序：
protected void Page_Load(object sender, EventArgs e)
{
fileUpload.Attributes["onchange"] = "uploadImage();";
}
在上面的代码中，我们使用Page_Load事件来添加onchange事件处理程序。
示例
示例1：使用ASP.NET Web Forms实现无刷新上传图片
在本示例中，我们将演示如何使用ASP.NET Web Forms实现无刷新上传图片。我们可以按照以下步骤来实现：
- 创建Web Forms应用程序：
我们可以使用Visual Studio创建Web Forms应用程序。例如，我们可以创建名为"WebFormsImageUploader"的Web Forms应用程序。
- 创建自定义控件：
我们可以使用Visual Studio创建自定义控件。例如，我们可以创建名为"ImageUploader"的自定义控件。
- 添加FileUpload控件和Image控件：
我们需要在自定义控件中添加FileUpload控件和Image控件。可以使用以下代码添加控件：
<asp:FileUpload ID="fileUpload" runat="server" />
<asp:Image ID="imgThumbnail" runat="server" />
在上面的代码中，我们使用asp命名空间添加FileUpload控件和Image控件。
- 添加JavaScript代码：
我们需要添加JavaScript代码来实现无刷新上传图片。可以使用以下代码添加JavaScript代码：
<script type="text/javascript">
function uploadImage() {
var fileUpload = document.getElementById("fileUpload");
var imgThumbnail = document.getElementById("imgThumbnail");
var formData = new FormData();
formData.append("file", fileUpload.files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "UploadImage.ashx", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
imgThumbnail.src = xhr.responseText;
}
};
xhr.send(formData);
}
</script>
在上面的代码中，我们使用JavaScript代码来实现无刷新上传图片。我们使用XMLHttpRequest对象来发送POST请求，并在响应中设置Image控件的src属性。
- 添加上传处理程序：
我们需要添加上传处理程序来处理上传的图片。可以使用以下代码添加上传处理程序：
public class UploadImage : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
HttpPostedFile file = context.Request.Files["file"];
string fileName = Path.GetFileName(file.FileName);
string fileExtension = Path.GetExtension(fileName);
string newFileName = Guid.NewGuid().ToString() + fileExtension;
string thumbnailPath = context.Server.MapPath("~/thumbnails/" + newFileName);
using (var image = Image.FromStream(file.InputStream))
{
var thumbnail = image.GetThumbnailImage(100, 100, null, IntPtr.Zero);
thumbnail.Save(thumbnailPath);
}
context.Response.ContentType = "text/plain";
context.Response.Write("~/thumbnails/" + newFileName);
}
public bool IsReusable
{
get
{
return false;
}
}
}
在上面的代码中，我们使用IHttpHandler接口来实现上传处理程序。我们使用HttpPostedFile对象来获取上传的文件，并使用System.Drawing命名空间中的类来生成缩略图。最后，我们将缩略图保存到服务器上，并在响应中返回缩略图的路径。
- 添加事件处理程序：
我们需要添加事件处理程序来调用JavaScript代码。可以使用以下代码添加事件处理程序：
protected void Page_Load(object sender, EventArgs e)
{
fileUpload.Attributes["onchange"] = "uploadImage();";
}
在上面的代码中，我们使用Page_Load事件来添加onchange事件处理程序。
- 运行Web Forms应用程序：
我们可以使用Visual Studio运行Web Forms应用程序。
示例2：使用ASP.NET MVC实现无刷新上传图片
在本示例中，我们将演示如何使用ASP.NET MVC实现无刷新上传图片。我们可以按照以下步骤来实现：
- 创建MVC应用程序：
我们可以使用Visual Studio创建MVC应用程序。例如，我们可以创建名为"MVCImageUploader"的MVC应用程序。
- 创建自定义控件：
我们可以使用Visual Studio创建自定义控件。例如，我们可以创建名为"ImageUploader"的自定义控件。
- 添加FileUpload控件和Image控件：
我们需要在自定义控件中添加FileUpload控件和Image控件。可以使用以下代码添加控件：
@using (Html.BeginForm("UploadImage", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="file" id="fileUpload" />
<img src="" id="imgThumbnail" />
}
在上面的代码中，我们使用Html.BeginForm方法添加表单，并使用input元素添加FileUpload控件和Image控件。
- 添加JavaScript代码：
我们需要添加JavaScript代码来实现无刷新上传图片。可以使用以下代码添加JavaScript代码：
<script type="text/javascript">
$(function () {
$("#fileUpload").change(function () {
var formData = new FormData();
formData.append("file", $("#fileUpload")[0].files[0]);
$.ajax({
url: "/Home/UploadImage",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function (data) {
$("#imgThumbnail").attr("src", data);
}
});
});
});
</script>
在上面的代码中，我们使用jQuery库来实现无刷新上传图片。我们使用$.ajax方法发送POST请求，并在响应中设置Image控件的src属性。
- 添加上传处理程序：
我们需要添加上传处理程序来处理上传的图片。可以使用以下代码添加上传处理程序：
[HttpPost]
public ActionResult UploadImage(HttpPostedFileBase file)
{
string fileName = Path.GetFileName(file.FileName);
string fileExtension = Path.GetExtension(fileName);
string newFileName = Guid.NewGuid().ToString() + fileExtension;
string thumbnailPath = Server.MapPath("~/thumbnails/" + newFileName);
using (var image = Image.FromStream(file.InputStream))
{
var thumbnail = image.GetThumbnailImage(100, 100, null, IntPtr.Zero);
thumbnail.Save(thumbnailPath);
}
return Content("~/thumbnails/" + newFileName);
}
在上面的代码中，我们使用HttpPost特性来标记上传处理程序。我们使用HttpPostedFileBase对象来获取上传的文件，并使用System.Drawing命名空间中的类来生成缩略图。最后，我们将缩略图保存到服务器上，并在响应中返回缩略图的路径。
- 运行MVC应用程序：
我们可以使用Visual Studio运行MVC应用程序。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：asp.net 自定义控件实现无刷新上传图片,立即显示缩略图,保存图片缩略图 - Python技术站
微信扫一扫 
支付宝扫一扫 
