附加文件时将附加图标更改为加载图标

Question

我想将附加图标更改为加载，然后在附加文件后将其更改为检查图标。

<button class="btn btn-primary fileinput-button" data-tooltip="tooltip" data-original-title="Import">
     <i class="fa fa-paperclip" aria-hidden="true"></i>
     <input id="fileupload" class="fileupload" type="file" name="files">
</button>

Answer 1

$("button").on('click', function() {
    var $this = $(this).find(".fa");
    $this.removeClass("fa-paperclip").addClass("fa-circle-o-notch fa-spin");
    setTimeout(function() {// or do your ajax stuff here
       $this.removeClass("fa-circle-o-notch fa-spin").addClass('fa-paperclip');
    },5000);
});

Answer 2

如果您使用课程在这里显示图标，那么

$("button").click(function(){
    $("YourElementHere").addClass("fa fa-loading");//just a sample

    //then if you have ajax here on Success function include below code
    //$("YourElementHere").removeClass("fa fa-loading"); //remove the class for loading
    //$("YourElementHere").addClass("fa fa-check"); //add the icon check

});