javascript 通过Azure Blob存储上传时没有“Kill Page”通知

我有一个项目，用户可以上传文件到云存储和上传大文件显然需要一些时间来做，我明白。但是，如果文件足够大，当上传到云的过程正在运行时，浏览器（在我的情况下是Chrome）将看到网页没有响应，并给予用户选择杀死页面或等待。我现在的目标是做一些事情，不让浏览器给予用户杀死页面的选择，但我正在努力找到一种方法。
我的第一个想法是添加某种进度条来跟踪上传进度，但我发现的源似乎只记录控制台日志上的进度，而不是实际的查看页面。
我的另一个想法是添加一个加载GIF之类的东西，它会在调用upload方法之前显示，但它不会在调用之前显示，只会在过程完成后的一瞬间显示。我为它做的代码看起来像下面这样。

function CallUploadFile(fileData, successFunction, errorFunction) {
    $('#loading-gif').show()
    $.ajax({
        url: '/File/UploadFile',
        type: 'post',
        data: data,
        success: function (fileData) { successFunction(data); },
        error: function (fileData) { errorFunction(data); },
        ...
    });
}

我不知道如何从这里开始，希望得到一些帮助。

您在Chrome中遇到的“杀死页面”通知问题可能是因为浏览器认为页面在文件上传过程中没有响应。为了防止这种情况并提供更好的用户体验，我们可以在文件上传过程中实现进度条并改进反馈。
下面的代码跟踪进度条来跟踪上传进度。在显示“文件已上传”消息10秒后，进度条将重置为零，单击“选择文件”也将重置进度条为零。

@{
    ViewData["Title"] = "File Upload";
}

<h2>File Upload</h2>

<form asp-controller="FileUpload" asp-action="UploadFile" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="file">Select a File:</label>
        <input type="file" name="file" id="file" class="form-control-file">
    </div>

    <button type="submit" class="btn btn-primary">Upload</button>
</form>

<div id="loading" class="text-center" style="display: none;">
    <img src="/images/loading.gif" alt="Loading...">
</div>

<div id="progress-container" class="mt-4">
    <div class="progress">
        <div class="progress-bar" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
            0%
        </div>
    </div>
</div>

<div id="file-uploaded" class="alert alert-success mt-3" style="display: none;">
    File Uploaded!
</div>

<div id="error-message" class="alert alert-danger mt-3" style="display: none;">
    Error Uploading File. Please try again.
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('form').submit(function () {
            var formData = new FormData($(this)[0]);

            $.ajax({
                url: '/FileUpload/UploadFile',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                xhr: function () {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener('progress', function (e) {
                        if (e.lengthComputable) {
                            var percent = (e.loaded / e.total) * 100;
                            $('#progress-bar').css('width', percent + '%').attr('aria-valuenow', percent);
                            $('#progress-bar').text(percent.toFixed(2) + '%');
                        }
                    });
                    return xhr;
                },
                beforeSend: function () {
                    $('#loading').show();
                    $('#progress-bar').css('width', '0%').text('0%');
                    $('#file-uploaded').hide();
                    $('#error-message').hide();
                },
                complete: function () {
                    $('#loading').hide();
                },
                success: function (data) {
                    // Handle success (e.g., display a success message)
                    $('#file-uploaded').show();
                    setTimeout(function () {
                        $('#progress-bar').css('width', '0%').text('0%');
                        $('#file-uploaded').hide();
                    }, 10000); // Reset after 10 seconds
                },
                error: function () {
                    // Handle error (e.g., display an error message)
                    $('#error-message').show();
                    $('#progress-bar').css('width', '0%').text('0%');
                    setTimeout(function () {
                        $('#error-message').hide();
                    }, 5000); // Hide error message after 5 seconds
                }
            });

            return false;
        });

        // Reset progress bar to zero when the "Choose File" button is clicked
        $('#file').click(function () {
            $('#progress-bar').css('width', '0%').text('0%');
        });
    });
</script>

上传开始前要显示的加载GIF行为：

<script type="text/javascript">
    $(document).ready(function () {
        $('#file').click(function () {
            $('#progress-bar').css('width', '0%').text('0%');
            $('#file-uploaded').hide();
            $('#error-message').hide();
        });

        $('form').submit(function () {
            var formData = new FormData($(this)[0]);

            $.ajax({
                url: '/FileUpload/UploadFile',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                xhr: function () {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener('progress', function (e) {
                        if (e.lengthComputable) {
                            var percent = (e.loaded / e.total) * 100;
                            $('#progress-bar').css('width', percent + '%').attr('aria-valuenow', percent);
                            $('#progress-bar').text(percent.toFixed(2) + '%');
                        }
                    });
                    return xhr;
                },
                beforeSend: function () {
                    $('#loading img').show();
                    $('#progress-container').show();
                },
                complete: function () {
                    $('#loading img').hide();
                    $('#file-uploaded').show();

                    // Reset the progress bar and messages after 10 seconds
                    setTimeout(function () {
                        $('#progress-bar').css('width', '0%').text('0%');
                        $('#file-uploaded').hide();
                        $('#error-message').hide();
                    }, 10000);
                },
                success: function (data) {
                    // Handle success (e.g., display a success message)
                },
                error: function () {
                    $('#error-message').show();
                }
            });

            return false;
        });
    });
</script>

有关详细信息，请参阅将large文件上传到Azure Blob Storage。

javascript 通过Azure Blob存储上传时没有“Kill Page”通知

1条答案

相关问题

热门标签

最新问答