Ajax无刷新上传图片。（jquery + c# ashx），生成缩略图等

在现代Web应用中，用户体验是至关重要的，而Ajax无刷新技术正是提升用户体验的重要手段之一。本文将深入探讨如何使用jQuery库结合C#的ASHX处理程序实现图片的无刷新上传，并生成缩略图。我们需要理解Ajax的核心原理，它是Asynchronous JavaScript and XML（异步JavaScript和XML）的缩写，但现在更多地与JSON和其他数据格式一起使用，而非局限于XML。 **Ajax无刷新上传图片** Ajax无刷新上传图片的基本流程包括前端交互、数据传输和后端处理。在前端，使用jQuery的`$.ajax`或`$.fileupload`方法可以方便地实现文件上传。以下是一个基本的示例： ```javascript $("#fileInput").on("change", function() { var formData = new FormData($(this)[0]); $.ajax({ url: "UploadHandler.ashx", type: "POST", data: formData, contentType: false, processData: false, success: function(response) { // 处理返回结果，例如显示上传成功信息 }, error: function(jqXHR, textStatus, errorThrown) { // 处理错误情况 } }); }); ``` 在这个例子中，`FormData`对象用于封装文件数据，`contentType`设置为`false`是为了避免浏览器自动设置Content-Type，`processData`设置为`false`防止jQuery尝试处理文件数据。 **C# ASHX处理程序** ASHX（Generic Handler）是ASP.NET中的轻量级HTTP处理程序，用于处理特定请求。在服务器端，我们需要创建一个ASHX文件来接收并处理前端发送的文件数据。以下是一个简单的图片上传处理示例： ```csharp public void ProcessRequest(HttpContext context) { if (context.Request.Files.Count > 0) { HttpPostedFileBase file = context.Request.Files[0]; if (file != null && file.ContentLength > 0 && file.ContentType.StartsWith("image/")) { string fileName = Path.GetFileName(file.FileName); string savePath = Server.MapPath("~/uploads/" + fileName); file.SaveAs(savePath); // 生成缩略图 GenerateThumbnail(savePath, Server.MapPath("~/thumbnails/" + fileName)); } } context.Response.ContentType = "text/plain"; context.Response.Write("文件上传成功"); } ``` 这个处理程序检查是否有文件上传，然后保存文件到服务器，并调用`GenerateThumbnail`方法生成缩略图。 **生成缩略图** 生成缩略图通常涉及到图像处理库，如ImageMagick或System.Drawing。以下是一个使用System.Drawing的简单示例： ```csharp private void GenerateThumbnail(string originalPath, string thumbnailPath) { using (var originalImage = Image.FromFile(originalPath)) { int maxWidth = 200; // 缩略图最大宽度 int maxHeight = 200; // 缩略图最大高度 // 计算缩放比例 double widthRatio = (double)maxWidth / originalImage.Width; double heightRatio = (double)maxHeight / originalImage.Height; double ratio = Math.Min(widthRatio, heightRatio); int newWidth = (int)(originalImage.Width * ratio); int newHeight = (int)(originalImage.Height * ratio); // 创建新的图像对象 using (var thumbnail = new Bitmap(newWidth, newHeight)) { using (var graphics = Graphics.FromImage(thumbnail)) { graphics.InterpolationMode = InterpolationMode.HighQualityBicubic; graphics.DrawImage(originalImage, 0, 0, newWidth, newHeight); } thumbnail.Save(thumbnailPath, ImageFormat.Jpeg); } } } ``` 这个方法计算出合适的缩放比例，然后创建一个新的图像对象，并将原始图像缩放后保存为缩略图。 总结来说，"Ajax无刷新上传图片。（jquery + c# ashx），生成缩略图"涉及的关键技术包括jQuery的Ajax功能，C#的ASHX处理程序，以及图像处理来生成缩略图。通过这些技术，我们可以创建一个用户友好的Web应用，让用户在不刷新页面的情况下上传图片，并自动生成预览缩略图，极大地提升了用户体验。