4

私はレールで小さな個人的なウェブサイトをまとめていて、ファイルをアップロードできるようにする必要があるところまで来ました。これはほとんど簡単な作業であり、まったく時間がかかりませんでした。

時間がかかっており、ゆっくりと正気を失いつつあるのは、アップロードの進行状況バーをユーザーに提供する作業です。これまでに少なくとも 12 のソリューションを見てきましたが、それらには共通点が 1 つあります。それは、Web サーバーにモジュールをインストールする必要があるということです。

私は自分のサーバーを制御できず、ホスティング会社がそのような動物をインストールすることを約束する可能性は低いと思われるため、私は少し困っています. これが本当に腹立たしいのは、このプロセスにサーバーを何らかの方法、形、または形式で関与させることが絶対に不要であるということです。

考えてみてください。ブラウザがリモート サーバーへのソケットを開き、データの送信を開始します。ブラウザは、送信されるバイト数を正確に認識しており、TCP 確認応答の魔法のおかげで、サーバー側に到着したバイト数も認識しています。では、フライング スパゲッティ モンスターの名の下に、爆破されたサーバーをいじらずにこのデータを Javascript に表示する簡単な方法がないのはなぜでしょうか?

4

3 に答える 3

6

ここでの本当の制限はHTMLフォームです。それらは、より大きなファイルのアップロードが完全に実行不可能であると思われた10年以上前に発明されました。したがって、アップロード全体が完了したときの1つのコールバックのみが提供されます（ACTIONパラメーター）。

幸いなことに、プログレスバーを提供する無料のフラッシュベースのアップローダーがいくつかあります。心配しないでください、それらのほとんどは優雅に劣化します（ユーザーがフラッシュを持っていない場合は単純なファイルアップロードフィールドを提供します）。すべてのオプションはJavascriptを介して制御できます。また、特別なサーバー側インフラストラクチャは必要ありません。

swfupload.orgを確認してください

于 2009-06-03T07:26:44.470 に答える
2

現在、IE (すべてのバージョン) を除くほとんどすべての Web ブラウザーで可能です。

JavaScript はかなり単純です。sourceforge.net で webfolder プロジェクトを確認してください。HTML5 をサポートするすべてのブラウザのアップロード % が表示されます。

 function upload() {
   document.folder.encoding = "multipart/form-data";
   if (document.folder.file.files) { 
       var xhr = new XMLHttpRequest();
        var fd = new FormData(document.folder);
        /* event listeners */
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false); // loadend if doesn't matter success or not 
        xhr.addEventListener("error", uploadError, false);
        xhr.open("POST", document.folder.action, true);
        fd.append('submit', 'Upload'); // keep consistent with view, so maybe return method in view
        fd.append('background', '1');
        xhr.send(fd); 
        return false;
   }
   return true;
}


function uploadProgress(evt) {
    if (evt.lengthComputable) {
        var per = (evt.loaded*100/evt.total).toFixed(0)+'%';
        getElement('_progress').innerHTML = per;
        document.title = 'Upload ('+per+')';
    }   else {
        getElement('_progress').innerHTML = evt.loaded;
    }
}

function uploadComplete(evt) {
    getElement('_progress').innerHTML = '100%';
    window.location.reload();
}

function uploadError(evt) {
    getElement('_progress').innerHTML = 'error';
}

より面白い機能を備えたサイトの進行状況バーを表示するコードもあります。

于 2013-04-12T05:50:50.957 に答える
0

残念ながら、ブラウザ間でそのための標準APIはありません。ただし、それが存在する場合でも、サーバーは参加する必要があります。送信したデータの量を信頼することはできません。HTTP には確認が必要です。したがって、サーバーがデータグラム #526 を受信したかどうかを通知する必要があります。APIがあれば、それは良い推測かもしれませんが、実際には同じではありません:S

www.faqs.org/rfcs/rfc1867.html を確認してください

サーバーに ping を実行できる場合は、それをシミュレートできます (自信はありません)。

于 2009-06-03T06:25:00.813 に答える