php - 进度条百分比无法正常工作(我有兴趣了解代码形式)

Question

进度条百分比无法正常工作

正确的进度条不起作用，而且是100%快

但文件尚未上传

点击提交按钮

进度条很快就完成了

但文件仍在上传

我有兴趣了解代码形式

        <?php
            $msg = [
                 "title file"
                ,"url file"
                ,"send file"
            ];
        ?>
        <link href="css/bootstrap.min.css"  rel="stylesheet">
        <link href="css/bootstrap-rtl.css"  rel="stylesheet">
        <link href="css/font-awesome.min.css"  rel="stylesheet">
        <script src="jquery.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js"></script>
        <style>
            .del {
                border-radius: 100%;
                display: inline-block;
                font-size: 13px;
                height: auto;
                margin-right: 4px;
                padding: 5px;
            }
            .box {
                height: 41px;
                padding-top: 2px;
                vertical-align: middle;
            }
            #uploadurl {
                border: 1px solid #ccc;
                margin-bottom: 7px;
                margin-top: 14px;
                padding-top: 11px;
            }
        </style>
        <script>
            var template = '<div class="form-group box">' +
                '<input type="text" class="col-sm-5 form-control" name="title[]" placeholder="<?=$msg[0]?>">' +
                '<input type="text" class="col-sm-6 form-control" name="url[]" placeholder="<?=$msg[1]?>">' +
                '<a href="#" class="btn btn-danger del"><i class="fa fa-times" aria-hidden="true"></i></a>' +
                '<div class="progress-bar progress progress-bar-success myprogress" role="progressbar" style="width:0%">0%</div></div>';
            $(document).ready(function(){
                $('.add').on('click',function (e) {
                    $("#uploadurl").append(template);
                });
                $(document).on('click','.del',function (e) {
                    var del = $(this).closest('.box').index();
                    $('.box').eq(del).remove();
                });
                $('#submit').click(function (e) {
                    e.preventDefault();
                    $("input[name='url[]']").each(function (index, value){
                        $('.myprogress').eq(index).css('width', '0');
                        var url = $(this).val();
                        var title = $("input[name='title[]']").eq(index).val();
                        if(title == ""){
                            title = <?=strtotime(date('Y-m-d h:s:i'))?>;
                        }else{
                            title =<?=strtotime(date('Y-m-d h:s:i'))?>+"_"+title;
                        }
                        var data = "url="+url+"&title="+title;
                        $.ajax({
                            type: 'POST',
                            url: "upload.php",
                            data: data,
                            datatype:"json",
        //                    contentType: "application/x-www-form-urlencoded",
                            processData: false,
                            // this part is progress bar
                            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);
                                        $('.myprogress').text(percentComplete + '%');
                                        $('.myprogress').css('width', percentComplete + '%');
                                    }
                                }, false);
                                return xhr;
                            },
                            success: function (data) {
                                $('#fileupload').append("<a style='display: block' href='"+data+"'>"+data+"</a>");
                            }
                        });
                    });
                });
            });

        </script>
        <div class="container">
            <form id="upload-form" method="post">
                <div id="uploadurl" class="col-md-12">
                    <div class="form-group box">
                        <input type="text" class="col-sm-5 form-control" name="title[]" placeholder="<?=$msg[0]?>">
                        <input type="text" class="col-sm-6 form-control" name="url[]" placeholder="<?=$msg[1]?>">
                        <div class="progress-bar progress-bar-success myprogress" role="progressbar" style="width:0%">0%</div>
                    </div>
                </div>
                <div style="display: block">
                    <a href="#" class="btn btn-success add">+</a>
                    <input type="submit" class="btn  btn-primary" id="submit" value="<?=$msg[2]?>" name="submit">
                </div>
            </form>
            <div id="fileupload">

            </div>
        </div>

上传.php

        $title =  $_POST['title'];
        $url   =  $_POST['url'];
        $now = date('Y-m-d h:s:i');
        $partition = date('Ym', strtotime($now));
        $folder = "file/attach/".$partition."/";
        if (!file_exists($folder)) {
            $old = umask(0);
            mkdir($folder, 0777);
            umask($old);
        }
        $p = pathinfo($url);

        $newfile = $folder.$title.".".$p['extension'];

        if ( copy($url, $newfile) ) {
            echo $newfile;
        }else{
            echo "false";

        }    

点击下面的链接查看演示

在您看到的 Firebug 中，文件仍在上传

但是进度百分比是 100%。

demo

Answer 1

当我需要一个进度条来添加我的文件下载时(在我的项目中)；我用了这段代码。我也测试过这段代码。尝试下面的代码；我非常确定它会满足您的目的:

<!doctype html>
<head>
<title>File Upload Progress Demo</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 
10px; padding: 15px }

.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 
1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px;  
}
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>File Upload Progress Demo #1</h1>
<code>&lt;input type="file" name="myfile"></code>
    <form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadedfile"><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>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js">
</script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
(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) {
 bar.width("100%");
percent.html("100%");
    status.html(xhr.responseText);
}
}); 

})();       
</script>

</body>
</html>

我的php上传文件:

$target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 

if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) { 
echo "The file ".  basename( $_FILES['uploadedfile']['name']). 
" has been uploaded";
 } else{
echo "There was an error in the upload, please try again!";
}
?>

希望它对您有所帮助并作为您的文档......快乐编码