Php 显示文件上载进度栏，而不单击“提交”按钮_Php_Javascript_Ajax_Jquery

Php 显示文件上载进度栏，而不单击“提交”按钮

php javascript ajax jquery

Php 显示文件上载进度栏，而不单击“提交”按钮,php,javascript,ajax,jquery,Php,Javascript,Ajax,Jquery,我正在尝试编写一个文件上传过程的代码。当我单击“浏览”按钮时，文件将上载到服务器上并显示文件内容，而不单击“提交”按钮。当我上传大文件时，上传会花费更多的时间，所以我需要实现一个progressbar 我提到了以下有用的链接：我希望在单击浏览按钮时自动显示进度条。我不知道如何调用进度条函数，当我在浏览窗口中选择文件时，没有单击提交按钮我使用了以下代码文件：index.php <!doctype html> <head>

我正在尝试编写一个文件上传过程的代码。当我单击“浏览”按钮时，文件将上载到服务器上并显示文件内容，而不单击“提交”按钮。当我上传大文件时，上传会花费更多的时间，所以我需要实现一个progressbar

我提到了以下有用的链接：

我希望在单击浏览按钮时自动显示进度条。我不知道如何调用进度条函数，当我在浏览窗口中选择文件时，没有单击提交按钮

我使用了以下代码

文件：index.php

        <!doctype html>
        <head>
        <title>File Upload Progress Demo #1</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>

                <form action="upload.php" method="post" enctype="multipart/form-data" id="hello">
                <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="jquery.js"></script>
        <script src="jquery.form.js"></script>
        <script>
        (function() {

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

        $('#hello').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 = "upload/";

        $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 uploading the file, please try again!";
        }
        ?>


文件上载进度演示#1
正文{padding:30px}
窗体{显示：块；边距：20px自动；背景：#eee；边框半径：10px；填充：15px}
.progress{位置：相对；宽度：400px；边框：1px实心#ddd；填充：1px；边框半径：3px；}
.bar{背景色：B4F5B4；宽度：0%；高度：20px；边框半径：3px；}
.percent{位置：绝对；显示：内联块；顶部：3px；左侧：48%；}


0%
（功能（）{
var bar=$（'.bar'）；
变量百分比=$（'.percent'）；
变量状态=$（“#状态”）；
$（'#你好'）.ajaxForm({
beforeSend:function（）{
status.empty（）；
var percentVal='0%'；
条形宽度（百分比值）
html（percentVal）；
},
上载进度：功能（事件、位置、总数、完成百分比）{
var percentVal=percentComplete+“%”；
条形宽度（百分比值）
html（percentVal）；
},
完成：函数（xhr）{
条形宽度（“100%”）；
html（“100%”）；
html（xhr.responseText）；
}
}); 
})();

文件：upload.php

        <!doctype html>
        <head>
        <title>File Upload Progress Demo #1</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>

                <form action="upload.php" method="post" enctype="multipart/form-data" id="hello">
                <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="jquery.js"></script>
        <script src="jquery.form.js"></script>
        <script>
        (function() {

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

        $('#hello').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 = "upload/";

        $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 uploading the file, please try again!";
        }
        ?>

您正在使用的jQuery插件似乎不支持您想要的行为。这就给您留下了两个选择：

破解插件，选择文件后立即开始上传
例如，用户可以选择一种上传方式，使您能够更好地控制上传控制

我想显示正在进行的状态栏，请与答案共享一些代码，因为链接可能会在将来接近。