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

Question

我正在尝试将文件上传到服务器完成时不刷新页面。我目前设法使用 XMLHttpRequest 将上传部分解决到 通用处理程序 (.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>

有人关心如何解决这个问题吗？

Answer 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>

Answer 2

明白了！ 它实际上是 VS2017 的 "Enable Reload on Save" 属性设置为 True，这是默认值。我遵循了解决方案 here , found it after googled "SaveAs refresh page". 代码 是正确的，它只是我的 VS 设置。希望这对其他人有帮助。

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

Prevent refresh after ajax file upload with ASP Generic Handler

javascript

jquery

asp.net

ajax

generic-handler