如何使用ajax或jquery获取文件上传进度 [英] How to get file upload progress using ajax or jquery

问题描述

如何使用ajax或jquery获取文件上传进度，这是我的代码

How to get file upload progress using ajax or jquery here's my code

    <form id="mid-form" id="upload_form" method="POST" enctype="multipart/form-data" action="includes/talent_upload_video.php">
                        <input type="hidden" id="target_id" name="target_id" value="<?php echo $_REQUEST['id']; ?>" />
                        <p style="text-align:center; padding:10px;"><span class="font18px">Upload Your Videos</span></p>
                        <p style="text-align:center;"><input type="file" name="picture" /></p>
                        <p style="text-align:center; padding:10px;">
                    <input type="submit" name="add_picture" value="ADD+" class="fontBold"> 
</form>

推荐答案

尝试以下示例

脚本

$(function() {

    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');

    $('form').ajaxForm({
        beforeSend: function() {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        complete: function(xhr) {
            status.html(xhr.responseText);
        }
    });
}); 

HTML

<form action="file-echo2.php" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile"><br>
    <input type="submit" value="Upload File to Server">
</form>

<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>

<div id="status"></div>

引用

您也可以尝试

这篇关于如何使用ajax或jquery获取文件上传进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！