2

ファイルを取得して処理し、ユーザーに返すアップロードスクリプトを作成しています。処理には数分かかる場合があります。ユーザーのフィードバックを提供するために私が現在行っていることは、実際のアップロード中にアップロード バーを表示し、アップロードが完了すると、それを「処理中」のメッセージに置き換えることです。ファイルの処理が完了すると、メッセージは新しいファイルへのリンクに置き換えられます。これは chrome では問題なく動作しますが、Firefox ではプログレス バーが 99.9% までしか表示されません。接続を閉じる前にアップロードが完了したかどうかを確認する方法はありますか?

ここに私が現在持っているものがあります

    outter = $(".item_box")[0];//content wrapper
    inner = outter.children[0];//content viewer, will be replaced with messages and content

    var p = document.createElement("progress");
    p.className = "uploadprogress";
    p.value = "0";
    p.max = "100";
    inner.textContent = "";
    inner.appendChild(p);//replace initial "click here" message with progress bar

    var formData new FormData();
    for (var i = 0; i < files.length; i++)//files is defined elsewhere and contains form data
    {
        formData.append('userfile', files[i]);
    }

    // now post a new XHR request
    var xhr = new XMLHttpRequest();
    xhr.open('POST', base_url+'upload/upload_media');//url of php script
    xhr.responseType = "json";
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4)//ajax request complete
        {
            p.value = p.innerHTML = 100;//set progress bar to 100%
            var data = JSON.parse(xhr.responseText);//my returned json object
            outter.removeChild(inner);
            var v = document.createElement("video");
            v.controls = "controls";
            v.innerHtml = data.msg;
            outter.appendChild(v);
        }
    }
    xhr.upload.onprogress = function (e)//handles progress bar value
    {
        if (e.lengthComputable)
        {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
            p.value = p.innerHTML = (Math.floor(done/total*1000)/10);
            if (done == 100)//this never happens in firefox
            {
                inner.removeChild(p);
                inner.textContent = "processing... please wait";
            }
        }
    }
    xhr.send(formData);
4

2 に答える 2

0

うーん... Firefox はまだこのバグを修正していません。FF バージョン 28 で同じ問題に苦しんでいます。OP と同様に、コードを「onprogress」ハンドラーから「onload」ハンドラーに移動することはできません。これは、スクリプトが処理を完了するまで「onload」が起動しないためです。アップロードされたファイル - ファイルのアップロードが完了したときよりもかなり遅れる可能性があります。アップロードされたファイルが小さいほど、FF は進行状況の報告をすぐに停止します (例: 280K ファイルは 84% で報告を停止する可能性がありますが、5 MB のファイルは 99% まで到達する可能性がありますが、100% になることはありません)。OPは一貫して大きなファイルを扱っているため、条件を「（done == 99）」または同様のしきい値に設定できます。残念ながら、そうはなりません」私や、さまざまなファイルサイズを扱っている他の人にとってはうまくいきません。さあ、Firefox！

于 2014-04-25T09:29:13.070 に答える
0

これは、私も遭遇した Firefox の奇妙な問題です。進行状況 100% で実行したいコードをonprogressevent からに移動することで、これを解決しましたxhr.readyState。onprogress2 か所に配置するとコードで問題が発生したため、イベントから削除しました。

于 2013-10-26T15:24:22.783 に答える