使用 ASP 通用处理程序上传 ajax 文件后防止刷新答案

【问题标题】：Prevent refresh after ajax file upload with ASP Generic Handler使用 ASP 通用处理程序上传 ajax 文件后防止刷新
【发布时间】：2018-04-15 18:29:16
【问题描述】：

我正在尝试将文件上传到服务器完成后不刷新页面。我目前设法解决了使用 XMLHttpRequest 到 Generic Handler (.ashx) 的上传部分。但是我找不到阻止它刷新的解决方案，尝试在ajax 上使用event.preventDefault() 和return false;，但它不起作用。

ajax 脚本

$('#uploadFileButton').on('click', function (event) {
    var counter;
    function UploadFile() {
        var files = $("#<%= file1.ClientID %>").get(0).files;
        counter = 0;
        // Loop through files
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var formdata = new FormData();
            formdata.append("file1", file);
            var ajax = new XMLHttpRequest();

            ajax.upload.addEventListener("progress", progressHandler, false);
            ajax.addEventListener("load", completeHandler, false);
            ajax.addEventListener("error", errorHandler, false);
            ajax.addEventListener("abort", abortHandler, false);
            ajax.open("POST", "FileUploadHandler.ashx");
            ajax.send(formdata);
        }
    }
    function progressHandler(event) {
        var percent = (event.loaded / event.total) * 100;
        $("#progress").html(Math.round(percent) + "% uploaded... please wait");
    }
    function completeHandler(event) {
        counter++
        $("#progress").html(counter + " " + event.target.responseText);
    }
    function errorHandler(event) {
        $("#progress").html("Upload Failed");
    } function abortHandler(event) {
        $("#progress").html("Upload Aborted");
    }
});

FileUploadHandler.ashx

public class FileUploadHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        HttpPostedFile file = context.Request.Files[0];
        string fname = context.Server.MapPath("~/Document/" + file.FileName);
        file.SaveAs(fname);
        context.Response.ContentType = "text/plain";
        context.Response.Write("File Uploaded Successfully!");
    }

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

如果您需要，index.aspx body

<body>
    <form id="form1" runat="server">
        <asp:FileUpload ID="file1" runat="server" AllowMultiple="true"/>
        <button id="uploadFileButton">Upload</button>
        <div id="progress">
        </div>
    </form>
</body>

有人想知道如何解决这个问题吗？

【问题讨论】：

event.preventDefault() 在问题代码中调用的位置在哪里？

标签： javascript jquery asp.net ajax generic-handler

【解决方案1】：

在按钮点击事件中使用 event.preventDetault()。您必须在按钮单击事件中调用 UploadFile() 函数。

<script type="text/javascript">
  $(document).ready(function (e) {
      $('#uploadFileButton').click(function (event) {
          var counter;
          UploadFile();
          event.preventDefault();
      });
      function UploadFile() {
        var files = $("#<%= file1.ClientID %>").get(0).files;
        counter = 0;
        // Loop through files
        for (var i = 0; i < files.length; i++) {
           var file = files[i];
           var formdata = new FormData();
           formdata.append("file1", file);
           var ajax = new XMLHttpRequest();
           ajax.upload.addEventListener("progress", progressHandler, false);
           ajax.addEventListener("load", completeHandler, false);
           ajax.addEventListener("error", errorHandler, false);
           ajax.addEventListener("abort", abortHandler, false);
           ajax.open("POST", "Handler.ashx");
           ajax.send(formdata);
         }
      }
      function progressHandler(event) {
         var percent = (event.loaded / event.total) * 100;
         $("#progress").html(Math.round(percent) + "% uploaded... please wait");
      }
      function completeHandler(event) {
        counter++
        $("#progress").html(counter + " " + event.target.responseText);
      }
      function errorHandler(event) {
        $("#progress").html("Upload Failed");
      } 
      function abortHandler(event) {
        $("#progress").html("Upload Aborted");
      }
  });
</script>

【讨论】：

嗯，上传完成后它仍然保持刷新..这是我尝试过的失败..再试一次以确保..
@John，我在编辑器中检查了上面的代码，它工作正常。上传完成后，我在答案中附上了屏幕截图。
显然，当我尝试在ashx 中注释掉file.SaveAs(fname); 时，它没有刷新，所以问题不应该是context.Response...
明白了！ 实际上，VS2017 的“保存时启用重新加载”属性设置为 True，这是默认设置。我遵循解决方案here，在谷歌搜索“另存为刷新页面”后找到它。您的代码是正确的，它只是我的 VS 设置。谢谢！

【解决方案2】：

明白了！ 实际上，VS2017 的“保存时启用重新加载”属性设置为 True，这是默认设置。我遵循解决方案here，在谷歌搜索“另存为刷新页面”后找到它。 @RGS 代码是正确的，它只是我的 VS 设置。希望这对其他人有帮助。

【讨论】：