javascript - 仅在选择文件后显示加载程序，并在单击取消或十字按钮时隐藏

Question

我一直在尝试在使用单个输入元素上传文件且不涉及其他元素时显示加载程序，但它不起作用。

  <!-- ! ajaxLoader Begin -->
            <div class="ajaxLoader" id="Loader">
                <img src="~/assets/img/loader.gif" alt="">
            </div>
            <!-- ! ajaxLoader End -->

     <input asp-for="File" id="File" type="file" class="form-control DocumentFile" accept=".pdf" title="Browse From Folder" />

下面是 JavaScript:

<script>
$('#File').focus(function (evt) {
 $(this).change(
            function () {
				 $('.ajaxLoader').show();
				 if ($(this).length === 0) {
					$('.ajaxLoader').hide();
				 }
				 else{
				    $.ajax({
                        type: "POST",
                        enctype: 'multipart/form-data',
                        url: '@Url.Action("UpdatedDocumentFile", "Document")',
                    data: formData,
                    async: false,
                    processData: false,
                    contentType: false,
                    success: function(res) {
					 // Do some process on 'res'
					 
					  $('.ajaxLoader').hide();
					},
                    error: function(e) {
					 $('.ajaxLoader').hide();
                    }
                });
				}
			}
  );
    });
	</script>

无论如何，文件上传时不会显示加载程序。尽管我尝试使用以下链接: Loader while file upload

但一旦单击输入元素，它就会启动加载程序，并关闭文件上传的任何操作(上传、取消、十字按钮单击)，而在我的情况下，它调用 ajax 并进行一些处理以最终将文件上传到服务器。另外，我尝试过输入文件的更改事件，但如果我打开文件位置但在第一次尝试时取消，它就不起作用，它永远不会关闭第一次尝试的加载程序

如何在文件上传、取消或十字按钮单击事件时显示/隐藏加载程序？

Answer 1

您可以使用焦点输出，但我更喜欢使用按钮点击，但您也可以使用

改变

ajax中有beforesend，你可以在其中启动加载器

$('#File').on('change', function (evt) { // or use focusout
    $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: '@Url.Action("UpdatedDocumentFile", "Document")',
        data: formData,
        async: false,
        processData: false,
        contentType: false,
        beforeSend: function ()
        {
            $('.ajaxLoader').show();
        },
        error: function (e) {
            $('.ajaxLoader').hide();
        },
        success: function (res) {
            $('.ajaxLoader').hide();
        }
    });
 });

或者你可以为所有ajax设置一个默认设置，试试这个，然后你就不需要ajax中的loader了

var $loader = $('#Loader'), timer;

 $loader.hide()
.ajaxStart(function()
{
    timer && clearTimeout(timer);
    timer = setTimeout(function()
    {
        $loader.show();
    },
    1000);
})
.ajaxStop(function()
{
    clearTimeout(timer);
    $loader.hide();
});