jQuery Загрузка файла Ajax с помощью зависания

Question

Я использую jQuery для загрузки файлов. Все работало нормально, пока я не добавил код xhr: function() {...} для отслеживания загрузки файла. Теперь он просто зависает после Start loading image.... Если я удалю этот блок с $.ajax, загрузка файла будет работать.

function showProgress(evt) { 
    if (evt.lengthComputable) { 
    var percentComplete = (evt.loaded/evt.total) * 100; 
    $('.meter').attr({'width': percentComplete + '%'}); 
    } 
} 


console.log('Start loading image...') 
$.ajax({ 
    url: '/uploadimage', 
    type: 'POST', 
    xhr: function() { 
    myXhr = $.ajaxSettings.xhr(); 
    if (myXhr.upload) { 
     myXhr.upload.addEventListener('progress', showProgress, false); 
    } else { 
     console.log("Upload progress is not supported."); 
    } 
    return myXhr; 
    }, 

    //Ajax events 
    beforeSend: function (xhr) { 
    // CSRF... 
    }, 
    success: function (data) { 
    // do smth 
    }, 

    // Form data 
    data: formData, 
    cache: false, 
    contentType: false, 
    processData: false 
}); 

Что я делаю с неудачей загрузки? Благодарю.

Answer 1

Вы поняли это? Используете ли вы предоставленные шаблоны выгрузки или используете собственную собственную разметку?

следующие работы для меня:

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#btnContinue').prop('disabled', true); 
    $('#fileupload').fileupload({ 
     url: '@Url.Action("UploadChunk", "Upload")', 
     maxChunkSize: 1048576, 
    }).addClass('fileupload-processing') 
    .bind('fileuploadalways', function (e, data) { 
     if ($('#fileIds').val().indexOf(';' + data.result.id + ';') == -1) { 
      var pre = $('#fileIds').val() == "" ? ';' : ''; 
      var append = $('#fileIds').val() + pre + data.result.id + ';'; 
      $('#fileIds').val(append); 
     } 
    }) 
    .bind('fileuploaddone', function (e, data) { 
     $('#btnContinue').prop('disabled', false); 
    }); 

    $.ajax({ 
     url: $('#fileupload').fileupload('option', 'url'), 
     dataType: 'json', 
     context: $('#fileupload')[0] 
    }).always(function() { 
     $(this).removeClass('fileupload-processing'); 
    }); 
}); 
</script> 

У меня есть проблема с моей установки, но вы должны быть в состоянии ссылаться мой код для того, что вы пытаетесь достичь.

Submit Additional Form Data without setting formData