文件上传处理阶段Spinner不显示问题的解决求助

问题根源 #

你代码里的async: false是核心问题。同步AJAX会完全阻塞浏览器的UI线程，导致slideDown()的动画还没来得及渲染，就被后续的文件上传逻辑卡住；等到AJAX请求完成后，又立刻执行slideUp()，所以要么看不到Spinner，要么只会闪一下就消失。

另外你还重复设置了contentType：同时写了contentType: 'multipart/form-data'和contentType: false，前者是错误的——FormData会自动生成带boundary的正确Content-Type，手动设置反而会导致上传失败。

修复步骤 #

1. 彻底删除async: false，使用默认的异步AJAX模式，让浏览器能同时处理UI渲染和上传请求；
2. 删掉错误的contentType: 'multipart/form-data'，保留contentType: false；
3. 补充error回调，避免上传失败时Spinner一直显示。

修复后的完整JS代码 #

var spwrap = $('#spwrap'); // 加载动画容器

inpfile.on('change', function(){
    spwrap.slideDown();  // 现在能正常显示动画
    var f = inpfile[0].files[0];
    var fd = new FormData();
    fd.append('inpfile', f);
    $.ajax({
        url: 'upload.php',
        type: 'POST',
        data: fd,
        success: function (data){
            console.log(data);
            spwrap.slideUp();
        },
        error: function(){
            // 上传失败也要隐藏Spinner
            spwrap.slideUp();
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

内容的提问来源于stack exchange，提问作者provance