jQuery文件上傳進度條

Question

我使用jQuery Ajax通過進度欄上傳視頻和圖像文件。 我正在使用服務器端表單驗證並檢查重復項。 我的問題是進度條完成后顯示驗證錯誤消息。 我想要這樣的東西

if form validation is correct
    then show progress bar
else if form validation is not correct
    then only show error message of form validation
else if duplicate entry
    then only show error message of duplicate entry

這是我的js代碼：

$.ajax({
    url:         ajaxUrl,
    type:        'POST',
    dataType:    'json',
    processData: false,
    contentType: false,
    async:       true,
    data: formData,
    xhr: function () {
        //upload Progress
        var xhr = $.ajaxSettings.xhr();

        if (xhr.upload) {
            xhr.upload.addEventListener('progress', function (event) {
                var percent = 0;
                var position = event.loaded || event.position;
                var total = event.total;

                if (event.lengthComputable) {
                    percent = Math.ceil(position / total * 100);
                }
                var temp = event.loaded/event.total*100;

                //update progressbar
                $('div#upload-progress').text(percent + "%");
                $('div#upload-progress').css("width",  + temp + "%");

            }, true);
        }
        return xhr;
    },
    complete: function(xhr) {
        if(xhr.responseText) {
            //console.log(xhr);
        }
    },
    success: function(data, status){
        if (data.hasOwnProperty('form-error')) {
            $.each(data['form-error'], function (key, value) {  
                $("span#span_" + key).text(value);
            })
        } else {
            // Form validation is correct
        }               
    },
    error : function(xhr, textStatus, errorThrown) {
        var data = xhr.responseText;
        myWindow = window.open("data:text/html," + encodeURIComponent(data), "parent", "width=1000, height=600");
        myWindow.focus();       
    }
});

誰能給我任何建議呢？

Answer 1

如果您使用服務器來驗證文件，則意味着必須先上載文件，然后才能進行驗證，因此為什么首先看到進度欄。 如果只想檢查重復項（基於文件名，大小等），則需要2個Ajax請求：

1. 僅發送文件名和大小並進行驗證。

2. 如果有效，請上傳文件。 （然后再次驗證）

只是我的2美分。

Answer 2

我確實上傳了帶有進度條的AJAX文件，您可能想看看嗎？ 我猜？ https://github.com/felixfong227/fileupload/blob/master/static/js/index.js