[解決済み] jQueryを使ったファイルアップロードプログレスバー

質問

私は、プロジェクトにAJAXファイルアップロード機能を実装しようとしています。私はこのためにjQueryを使用しています。私のコードは、AJAXを使用してデータを送信します。また、ファイルアップロードプログレスバーも実装したいです。どうすればよいですか？アップロードされたパーセンテージを計算し、プログレスバーを作成できるように、すでにアップロードされた量を計算する方法はありますか？

解決方法は？

注意事項 に関連する質問です。 jQueryフォームプラグイン . 純粋なjQueryのソリューションをお探しの場合。 ここから . すべてのブラウザに対応する総合的なjQueryのソリューションはありません。だから、あなたはプラグインを使用する必要があります. 私が使っているのは ドロップゾーン.js これは古いブラウザのために簡単にフォールバックできるようになっています。あなたが好むどのプラグインは、あなたのニーズに依存します. そこに良い比較のポストがたくさんある.

からの 例 :

jQueryです。

$(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>

プログレスバーはCSSでスタイル指定する必要があります。