php - プログレスバー付きの簡単なクロスブラウザ、jQuery/PHP ファイルのアップロード

Question

これについていくつかのトピックがあることは知っていますが、ファイルアップローダースクリプトの明確な解決策を提供するものはありませんでした。

IE7+で動作
進行状況バーがあります (すべてのブラウザーで)
フラッシュなし (またはフォールバック)

解決策はありますか？

score 38 · Accepted Answer

AlbanXの Axuploaderを使用できます。それは持っています。

すべてのブラウザでの複数ファイルのアップロード
html5 ブラウザー (IE 以外) での複数ファイルの選択
html5 ブラウザで進捗情報をアップロードする
html5 ブラウザーでのファイルサイズ情報
Flash なし、Silverlight なし、他のプラグインでは JavaScript のみ
IE 6 以降、Firefox 2 以降、Safari 2 以降、Chrome 1 以降をサポート
パフォーマンスを向上させるために、ファイルをチャンク単位でアップロードします
サーバーの最大投稿サイズと最大アップロードファイルサイズの制限に依存しない

Widen の Fine-Uploaderを試すこともできます。それは持っています。

FF、Chrome、および Safari の複数ファイル選択、進行状況バー
FF、Chrome、および Safari (OS X) でのドラッグアンドドロップファイル選択
アップロードはキャンセル可能です
FineUploader または FineUploaderBasic を使用する場合、外部依存関係はまったくありません。オプションの jQuery ラッパーを使用する場合は、もちろん jQuery が必要です。
FineUploaderBasic は、関連する Fine Uploader JavaScript ファイルのみを必要とします。Fine Uploader の css ファイルと画像ファイルはすべて省略できます。
フラッシュを使用しない
HTTPS で完全に動作
IE7+、Firefox、Safari (OS X)、Chrome、IOS6、およびさまざまなバージョンの Android でテスト済み。IE10にも対応しました！
ファイルが選択されるとすぐにアップロードする機能、または後でユーザーの要求に応じてアップロードするために「キューに入れる」機能
アップロードの失敗時にサーバーからの特定のエラーメッセージを表示する (失敗したアップロード項目にカーソルを合わせる)
失敗したアップロードを自動再試行する機能
ユーザーが失敗したアップロードを手動で再試行できるようにするオプション
独自のファイルバリデータを作成するか、Fine Uploader に含まれるデフォルトのバリデータを使用します。
アップロードプロセスのさまざまな段階でコールバックを受け取る
各ファイルとともにサーバー側のパラメーターを送信します。
ドラッグアンドドロップでディレクトリをアップロードします (Chrome 21 以降)。
クエリ文字列またはリクエスト本文にパラメーターを含めます。
API 経由でアップロードするファイルを送信します。
ファイルを複数のリクエストに分割します (ファイルのチャンク/パーティショニング)。
以前のセッションから失敗した/停止したアップロードを再開する
アップロードしたファイルを削除する
CORS サポート
API 経由で Blob オブジェクトをアップロードします。
アイテムの上限を簡単に設定して適用します。
貼り付け (Chrome) で画像をアップロードします。
スタンドアロンのファイルとフォルダーのドラッグアンドドロップモジュール。デフォルトで FineUploader モードに統合されています。
関連するファイルに影響を与えるコールバックで非同期 (非ブロッキング) タスクを実行する
モバイルデバイスのカメラから直接画像をアップロードする
アップロードされたファイルの統計を取得し、ステータスの変化に関するコールバックを受け取ります
などなど！

または、持っているjQuery-File-Upload プラグイン(IE と互換性があります)。

複数ファイルのアップロード: 複数のファイルを一度に選択して同時にアップロードできます。
ドラッグアンドドロップのサポート: デスクトップまたはファイルマネージャーからファイルをドラッグして、ブラウザーウィンドウにドロップすることで、ファイルをアップロードできます。
アップロードの進行状況バー: 個々のファイルのアップロードの進行状況と、すべてのアップロードを組み合わせたアップロードの進行状況を示す進行状況バーを表示します。
キャンセル可能なアップロード: 個々のファイルのアップロードをキャンセルして、アップロードの進行を停止できます。
再開可能なアップロード: 中止されたアップロードは、Blob API をサポートするブラウザーで再開できます。
チャンクアップロード: Blob API をサポートするブラウザーを使用すると、大きなファイルを小さなチャンクでアップロードできます。
クライアント側の画像のサイズ変更: 必要な JS API をサポートするブラウザーを使用して、画像をクライアント側で自動的にサイズ変更できます。
画像のプレビュー: 必要な JS API をサポートするブラウザーを使用して、アップロードする前に画像ファイルのプレビューを表示できます。
ブラウザープラグイン (Adobe Flash など) は不要: 実装は HTML5 や JavaScript などのオープンスタンダードに基づいており、追加のブラウザープラグインは必要ありません。
レガシーブラウザーのグレースフルフォールバック: サポートされている場合は XMLHttpRequests 経由でファイルをアップロードし、レガシーブラウザーのフォールバックとして iframe を使用します。
HTML ファイルアップロードフォームのフォールバック: JavaScript が無効になっている場合、標準の HTML ファイルアップロードフォームを表示します。
クロスサイトファイルアップロード: クロスサイト XMLHttpRequests を使用した別のドメインへのファイルのアップロードをサポートします。
複数のプラグインインスタンス: 同じ Web ページで複数のプラグインインスタンスを使用できます。
カスタマイズ可能で拡張可能: 個々のオプションを設定し、さまざまなアップロードイベントの callBack メソッドを定義するための API を提供します。
マルチパートおよびファイルコンテンツストリームのアップロード: ファイルは、標準の "multipart/form-data" またはファイルコンテンツストリーム (HTTP PUT ファイルアップロード) としてアップロードできます。
サーバー側アプリケーションプラットフォームとの互換性: 標準の HTML フォームファイルのアップロードをサポートする任意のサーバー側プラットフォーム (PHP、Python、Ruby on Rails、Java、Node.js、Go など) で動作します。

参考文献

HTML5で動作する優れたファイルアップローダーについては、「jQuery を使用した10 の HTML5 ファイルアップロードの例」を参照してください。

また、ここ10+ PHP Ajax Upload File Tutorials - Free Downloadでは、多くのアップローダーから選択できます。

score 1 · Accepted Answer

以下は必要なものだと思います.FlashコンポーネントによるIEでの進行中のアップロードもサポートしています

score 0 · Accepted Answer

これを使って：

http://valums.com/ajax-upload/

Flashなし、シンプルなJquery。

特徴

複数のファイルを選択、FF、Chrome、Safariのプログレスバー

FF、Chromeでのファイル選択のドラッグアンドドロップ

アップロードはキャンセル可能です

外部依存関係なし

Flashを使用していません

httpsで完全に動作します

FF、Chrome、Safariでのキーボードサポート

IE7,8でテスト済み。Firefox 3,3.6,4; Safari4,5; クロム; Opera10.60;

git：https ://github.com/valums/file-uploader

これらも使用できます。

http://nixboxdesigns.com/demos/jquery-uploadprogress.php

https://github.com/drogus/jquery-upload-progress

http://www.albanx.com/

フラッシュレスIEプログレスバー

http://www.webappers.com/2011/01/24/jquery-file-upload-with-upload-progress-bar/

お役に立てれば。