0

ファイルアップロードプロセスをコーディングしようとしています。参照ボタンをクリックすると、ファイルがサーバーにアップロードされ、送信ボタンをクリックせずにそのファイルの内容が表示されます。大きなサイズのファイルをアップロードすると、アップロードに時間がかかるため、プログレスバーを実装する必要がありました。

次の便利なリンクを参照しました。

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

1 に答える 1

1

使用している jQuery プラグインは、必要な動作をサポートしていないようです。これにより、次の 2 つのオプションが残ります。

  • プラグインをハックして、ファイルを選択した直後にアップロードを開始します。
  • http://www.plupload.com/など、アップロード コントロールをより詳細に制御できるアップロードの代替手段を使用します。
于 2013-04-19T11:30:33.100 に答える