Javascript 使用进度条上载文件

我创建这段代码是为了用ajax和php上传文件，我想添加 进度条显示上传的百分比

这是我的密码

<script>
   $("form#data").submit(function(){
    var formData = new FormData($(this)[0]);
    $.ajax({
        url: "functions/video.php",
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            document.getElementById("status").innerHTML = data;
        },
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
});
</script>
<form id="data" method="post" enctype="multipart/form-data">
<input name="up_vid" type="file" id="up_vid"/>
<div class="upload_v_icon"></div>
<div class="video_info">
    <input type="text" name="video_title" placeholder="Video title" />
    <input type="text" name="tags" placeholder="funny,9gag,nice,crazy ..."/>
    <textarea name="description" placeholder="Description"></textarea>
    </div>
    <div class="bg_upload">
    <p>When you upload this video your are agree with <a href="">Terms</a> of service.</p>
    <button>Begin Upload</button>
    </div>
</form>

$（“表单数据”）.submit（函数（）{
var formData=新formData（$（此）[0]）；
$.ajax({
url:“functions/video.php”，
键入：“POST”，
数据：formData，
async:false，
成功：功能（数据）{
document.getElementById（“status”）.innerHTML=数据；
},
cache:false，
contentType:false，
processData:false
});
返回false；
});
当您上传此视频时，我们同意您提供的服务

开始上传

---

谢谢。

这假设存在一个1px宽的名为“progress.gif”的gif。将其颜色设置为希望进度条显示的颜色

在css中添加如下内容：

.uploadBar {
   background-image:url(/images/progress.gif);
   background-position: -1px;
   background-repeat:no-repeat;
   background-size=0% 100%; width:100%;
   position: relative; overflow: hidden;
}

在$.ajax（）中添加类似的内容

---

这假设存在一个1px宽的gif，称为“progress.gif”。将其颜色设置为希望进度条显示的颜色

在css中添加如下内容：

.uploadBar {
   background-image:url(/images/progress.gif);
   background-position: -1px;
   background-repeat:no-repeat;
   background-size=0% 100%; width:100%;
   position: relative; overflow: hidden;
}

在$.ajax（）中添加类似的内容

---

我认为

async:false，

将是一个问题。首先，它不是AJAX吗？如果它不是异步的，那么它几乎被弃用了。我认为您不能同时使用回调和async:false。我认为

async:false，

将是一个问题。首先，它不是AJAX吗？如果它不是异步的，那么它几乎被弃用了。我认为不能同时使用callback和async:false或将

放在表单下方。将jQuery包装在

$（文档）中。就绪（函数（）{}）

或将

放在表单下方。