博客

ajax+ashx完美实现inputfile上传文件

  • Post category:other

以下是关于“ajax+ashx完美实现inputfile上传文件”的完整攻略，包括基本概念、使用方法和两个示例。

基本概念

在Web开发中，文件上传是一个常见的需求。使用ajax和ashx可以实现文件上传功能。ajax是一种用于创建异步Web应用程序的技术，可以在不重新加载整个页面的情况下更新部分页面。ashx是一种用于处理HTTP请求的通用处理程序，可以处理各种类型的请求。

使用方法

以下是使用ajax和ashx实现文件上传的方法：

  1. 创建HTML文件上传控件：可以使用以下代码创建一个HTML文件上传控件：
<input type="file" id="fileInput" />
  1. 使用ajax上传文件：可以使用以下代码使用ajax上传文件：
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);

var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.ashx', true);
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log('上传成功');
  } else {
    console.log('上传失败');
  }
};
xhr.send(formData);

在这个代码中，使用FormData对象将文件添加到表单数据中，然后使用XMLHttpRequest对象将表单数据发送到服务器。

  1. 创建ashx处理程序：可以使用以下代码创建一个ashx处理程序：
public class UploadHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        HttpPostedFile file = context.Request.Files["file"];
        string fileName = Path.GetFileName(file.FileName);
        string filePath = context.Server.MapPath("~/uploads/" + fileName);
        file.SaveAs(filePath);
        context.Response.ContentType = "text/plain";
        context.Response.Write("上传成功");
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

在这个代码中，使用HttpPostedFile对象获取上传的文件，然后将文件保存到服务器上的指定路径中。

以下是两个示例：

示例一：使用ajax和ashx上传文件

以下是使用ajax和ashx上传文件的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文件上传</title>
</head>
<body>
  <input type="file" id="fileInput" />
  <button id="uploadButton">上传</button>

  <script>
    var fileInput = document.getElementById('fileInput');
    var uploadButton = document.getElementById('uploadButton');

    uploadButton.addEventListener('click', function () {
      var file = fileInput.files[0];
      var formData = new FormData();
      formData.append('file', file);

      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'upload.ashx', true);
      xhr.onload = function () {
        if (xhr.status === 200) {
          console.log('上传成功');
        } else {
          console.log('上传失败');
        }
      };
      xhr.send(formData);
    });
  </script>
</body>
</html>

在这个示例中，使用ajax和ashx上传文件。

示例二：使用ashx处理程序保存上传的文件

以下是使用ashx处理程序保存上传的文件的示例：

public class UploadHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        HttpPostedFile file = context.Request.Files["file"];
        string fileName = Path.GetFileName(file.FileName);
        string filePath = context.Server.MapPath("~/uploads/" + fileName);
        file.SaveAs(filePath);
        context.Response.ContentType = "text/plain";
        context.Response.Write("上传成功");
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

在这个示例中，使用ashx处理程序保存上传的文件。

结论

使用ajax和ashx可以实现文件上传功能。可以使用HTML文件上传控件创建文件上传控件。可以使用FormData对象将文件添加到表单数据中，然后使用XMLHttpRequest对象将表单数据发送到服务器。可以使用ashx处理程序处理上传的文件。可以使用示例学习和理解使用ajax和ashx实现文件上传的方法。

Tags: