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

Question

これについていくつかのトピックがあることは知っていますが、ファイルアップローダースクリプトの明確なソリューションを提供するトピックはありません。

IE7 +で動作します
プログレスバーがあります（すべてのブラウザーで）
フラッシュなし（またはフォールバック）

解決策はありますか？

blasteralfred Ψ · Accepted Answer

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

すべてのブラウザでのマルチファイルアップロード
Html5ブラウザーでの複数ファイル選択（IEではない）
Html5ブラウザーで進行状況情報をアップロードする
Html5ブラウザーのファイルサイズ情報
フラッシュなし、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以降）。
クエリ文字列にパラメーターを含めるORリクエスト本文。
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を提供します。
マルチパートおよびファイルコンテンツストリームのアップロード：ファイルは、標準の「マルチパート/フォームデータ」またはファイルコンテンツストリームとしてアップロードできます（HTTP PUTファイルアップロード）。
任意のサーバー側アプリケーションプラットフォームとの互換性：標準HTMLフォームファイルをサポートする任意のサーバー側プラットフォーム（PHP、Python、Ruby on Rails、Java、Node.js、Goなど）で動作します。アップロードします。

参照資料

jQueryを使用した10 HTML5ファイルのアップロードの例 をチェックして、HTML5で動作する優れたファイルアップローダーを確認してください

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

user1335639 · Answer

以下はあなたが必要とするものだと思う、彼らはIE by Flashコンポーネント

http://yuilibrary.com/yui/docs/uploader/
http://www.plupload.com/documentation.php

Scott Weinert · Answer

http://www.plupload.com/ は複数のランタイムで使用でき、適切に劣化しています。 HTML5がサポートされている場合は、ドラッグアンドドロップでアップロードすることもできます。

AlphaMale · Answer

これを使って：

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

フラッシュなし、シンプルなJquery。

機能

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

fFでのドラッグアンドドロップによるファイル選択、Chrome

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

外部依存関係なし

flashを使用していません

httpsを完全に使用する

fF、Chrome、Safariのキーボードサポート

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