bootstrap上传 PHP,使用AJAX和Bootstrap将文件上传到PHP的进度栏

我有使用AJAX将图像上传到PHP脚本的表单

这是我的表格

File:

ProjectName:

结果div是显示PHP输出的位置(请参见AJAX)

进度栏是我希望看到我的引导进度栏的地方.

这是我的AJAX

$(function () {

$('form#data').submit(function (e){

e.preventDefault();

e.stopImmediatePropagation();

var formData = new FormData($(this)[0]);

var file = $('input[type=file]')[0].files[0];

formData.append('upload_file',file);

$('.progress').show();

$.ajax({

xhr: function() {

var xhr = new window.XMLHttpRequest();

xhr.upload.addEventListener("progress", function(evt) {

if (evt.lengthComputable) {

var percentComplete = evt.loaded / evt.total;

percentComplete = parseInt(percentComplete * 100);

$('.progress-bar').css('width',percentComplete+"%");

$('.progress-bar').html(percentComplete+"%");

if (percentComplete === 100) {

}

}

}, false);

return xhr;

},

type:'POST',

url: 'upload.php',

data: formData,

async:false,

cache:false,

contentType: false,

processData: false,

success: function (returndata) {

$('#result').html(returndata);

}

});

return false;

});

});

现在,我得到一个输出,向我显示PHP中回显的数据.但是由于某种原因,我无法使进度条正常工作.

可能是什么问题？

解决方法:

这应该做

var progress_bar = $(".progress-bar");

progress_bar.html("0%");

progress_bar.css("width", 0);

$(".progress").hide();

标签：php,jquery,ajax,forms,twitter-bootstrap

来源： https://codeday.me/bug/20191009/1881341.html