Как отобразить сообщение после загрузки файла с помощью XMLHttpRequest?

Question

Здравствуйте, сообщество! Надеюсь, вы можете помочь мне, так как я не смог показать сообщение пользователю после загрузки файла Excel.

Я использую httpRequest для отправки данных на сервер, и все работает правильно, файлскачал, но я также хочу показать сообщение.

Большое спасибо за вашу помощь.

Это мой код javaScript.

function download_excel_file() {

        var file_name; //Example Test.xlsx
      
       var parameter = '{file_name:"' + file_name + '"}';
            var url = "Download.aspx/Download_File";
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function() {
                var a;
                if (xhr.readyState === 4 && xhr.status === 200) {                 
                    a = document.createElement('a');
                    a.href = window.URL.createObjectURL(xhr.response);
                   
                    a.download = file_name;
                    a.style.display = 'none';
                    document.body.appendChild(a);
                    a.click();
                    
                 // Here I want to show the message with the legend = File downloaded successfully but it does not work.
            $("[id*=message_download]").css("display","block");
            $("[id*=message_download]").text(xhr.response.Text);
                    
                }
                
            };
            
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.responseType = 'blob';
            xhr.send(parameter);           

        

    }

<input id="btn_download_file" type="button" value="Download file" class="btn btn-success btn-block" onclick="return download_excel_file();"/>

 <div id="message_download" class="p-3 mb-1 bg-secondary text-white text-center" style="display:none">                                  </div>   

Это мой код с сервера.

[WebMethod]
    public static void Download_File(string file_name)
    {
        if (file_name != null || file_name != "")
        {
            string path = HttpContext.Current.Server.MapPath("~/Folder_Excel/" + file_name);

            if (File.Exists(path))
            {
                // This is the message I want to show in the div $("[id*=message_download]")
                HttpContext.Current.Response.Write("File downloaded successfully");                  

                System.IO.FileStream fs = null;

                fs = System.IO.File.Open(path, System.IO.FileMode.Open);
                byte[] btFile = new byte[fs.Length];
                fs.Read(btFile, 0, Convert.ToInt32(fs.Length));
                fs.Close();

                HttpContext.Current.Response.AddHeader("Content-disposition", "attachment; filename=" + file_name);
                HttpContext.Current.Response.ContentType = "application/octet-stream";
                HttpContext.Current.Response.BinaryWrite(btFile);                   
                HttpContext.Current.Response.Flush();
                HttpContext.Current.Response.End();
            }
            else
            {
                HttpContext.Current.Response.Write("No files");
            }
        }         
    }

Answer 1

Добавить предупреждение в конце скрипта:

<script>
function myFunction() {
alert("Success! File downloaded!");
}
</script>

---

добавлено 2019 10 04

---

Используйте InnerHTML вместе с getElementById, чтобы вернуть сообщение обратнос сервера.

с https://www.w3schools.com/xml/xml_http.asp

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
     // Typical action to be performed when the document is ready:
     document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};
xhttp.open("GET", "filename", true);
xhttp.send();

Answer 2

Я не думаю, что вы используете Атрибут Содержит селектор правильно.

$("[id*=message_download]").css("display","block");
$("[id*=message_download]").text(xhr.response.Text);

Попробуйте вместо этого:

$("[id*='message_download']").css("display","block");
$("[id*='message_download']").text(xhr.responseText);

Или еще лучше, используйте $("#message_download") Также обратите внимание, что я изменил xhr.response.Text на xhr.responseText

Answer 3

Сначала вы должны отобразить сообщение , а затем заставить браузер "нажать" на кнопку загрузки. В противном случае браузер может просто запустить событие unload и прекратить выполнение любых сценариев в это время - как при перенаправлении.