Question

我正在尝试编写文件上传过程。当我点击浏览按钮时，文件将被上传到服务器上并显示该文件内容而不点击提交按钮。当我上传大尺寸文件时，上传将花费更多时间，因此我需要实现进度条。

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

http://malsup.com/jquery/form/progress.html

http://malsup.com/jquery/form/#file-upload

我希望在单击“浏览”按钮时自动显示进度条。当我在浏览窗口中选择文件而不点击提交按钮时，我不知道如何调用进度条功能。

我使用了以下代码。

文件：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>

文件：upload.php

        <?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!";
        }
        ?>

Answer 1

您使用的jQuery插件似乎不支持您想要的行为。这有两个选择：

破解插件，在选择文件后立即开始上传。
用户可选择上传，以便您更好地控制上传控件，例如http://www.plupload.com/。

显示文件上载进度条而不单击提交按钮

1 个答案: