Fine Uploader ファイルアップロードコンポーネントアプリケーションの紹介

最近では、バックグラウンドデータを処理する際にファイルのアップロードを実装する必要があるため、Fine Uploader を使用してファイルをアップロードする際に ajax を使用します (環境に応じて)。ブラウザのバージョン] IE のバージョンは 9 以降である必要があります [IE10]。このコンポーネントは、基本的に現在の主流のブラウザに依存しません。サードパーティのコンポーネントは、すでにサーバー側でサポートされており、ファイルサイズ、ファイルタイプの制限などをサポートしています。ファイルのアップロード数などは、公開されたオプションを備えた統一インターフェイスを通じて操作されます。

Github の Fine Uploader を参照公式声明によると、Fine Uploader の前身は Ajax Upload です。新しいバージョンの Fine Uploader には主にいくつかの新機能が追加されています。バージョン 1.0 でリリースされた Realse Note から判断すると、この 2 つの最大の違いは、Fine Uploder が Jquery コンポーネントに基づいていないことです。同様の戻り値もすべて Json に統一されています。バックグラウンドサーバー操作とフロントエンド Dom オブジェクトの一部の操作コードはすべて Js Script スクリプトファイルに集中されており、この統合により、CSS + JavaScript ファイルを追加するだけでファイルのアップロードを実現できます。ユーザーによるコンポーネントの参照と操作の難しさを大幅に簡素化します

Fine Uploader の機能は次のとおりです:
Fine Uploader の機能:
A: ファイルのアップロードの進行状況表示をサポートします
B: ファイルのドラッグアンドドロップによるブラウザアップロード方法
C : 更新を行わない Ajax ページ。
F: クロスブラウザー。
E: Git Hub および Php Designer でパッケージ化ソースコードをダウンロードします。 8 のコードを確認すると、ソースコード構造が次のとおりであることがわかります。

ルートディレクトリには、クライアント呼び出しに必要なファイルが表示されます。サーバーディレクトリは、Perl/Php/Asp.net のさまざまな言語バージョンに対応しています。 [VB] など。implementation.test ディレクトリには、参考用の完全なローカルサンプルデモが含まれています。実際、公式が Basic-Demo-Page で簡単なデモを提供しています。 Bootstrap メソッドに基づいてここに構築します。 2013-01-04_162943 まず、新しい空の Html ページを作成し、次のように CSS 参照を追加します。

コードは次のとおりです。

これら 2 つのファイルをダウンロードするときに参照する必要がある .fineuploader.css は、Fine Uploder のソースコードに対応する Client ディレクトリです。次の .fineuploder.css は、主にボタンスタイル、進行状況表示スタイル、次のように JavaScript ファイル参照を追加します: コードをコピーします

コードは次のとおりです:

;

Uploder.jsとuploader.basic.jsはすべてこのスクリプトに実装されているフロントエンドのアップロード機能です。
同時に処理と読み込みの進行状況の表示に必要な2つの動的画像を追加します。これらの画像は、fineuploder.css ファイルで呼び出されます。

次のコードを本文に追加します

コードをコピーします

コードは次のとおりです。

function createUploader() { 
var Uploader = new qq.FineUploader({ 
element: document.getElementById('bootstrapped-fine-uploader'), 
request: { 
endpoint: 'server/handlerfunction' 
}, 
text: { 
uploadButton: ' 今すぐクリックして商品画像をアップロードしてください' 
}, 
template: 
'' + 
'<span>{dragZoneText}</span>ログイン後にコピー
' + 
'{uploadButtonText}
' + 
'{dropProcessingText}'+ 
''+
'' + 
'
', 
classes: { 
success: 'alertアラート成功'、
失敗: 'アラート アラートエラー' 
}、
デバッグ: true 
}); 
} 

window.onload = createUploader; 
スクリプト> 

これは、Bootstrap に基づいており、Fine Uploader の最上級のフロントエンド用です。フロントエンド一般に必要なアイテム事 A: 追加 Css+Js 文例参照。B: 在 Js 中实例化 qq.FineUploder オブジェクト.运行効果如下:
2013-01-04_170433

查看JS構築qq.Fineuploader对象建过程.最初指定Fine Uploader插件のDom元素.通过Dom获取操作.request对应サービス务器端实现文件路径.在这建议不要自己構築サービス端末処理。むしろ直接採用官方提供の実装文書修正即可。template は、パッケージ上転送ファイルの追加コンテンツモジュールの自己修正も可能です。debug は、ウェアラブルの制御台を使用するかどうかを制御するために使用される、Fine Uploader の通知情報であり、false と認められます。
qq.FineUploader オブジェクトには次のような制御制御パラメータがあります:
検証: このパラメータ一般的に使用される、実行上での文件操作前.在客端視一部验证.验证操作包含文件格式.文件大小.等追加格式如下:

复制代符号代码如下:

validation:
{
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
sizeLimit: 204800 // 200 kB = 200 * 10 24バイト
}
allowedExtensions 制御上传文件の後缀格式数组。
sizeLimit 転送ファイルサイズの上限、単位はバイトの数です。デバイスは必ずしもこの配置をサポートしているわけではありません。サーバーの端末に配置することもできます。
minSizeLimit: 上転送ファイルサイズの下限、単位はバイトの数。同様に、いくつかのバイザーが存在します。
外部针对qq.FineUploder对オブジェクト执行上で制御可能五个客端制御可能イベント再コールバックパラメータ下設定可能:
callbacks:
{
onSubmit: function(id, fileName) {
$messages.append('

');
},
onUpload: function(id, fileName) {
$('#file-' + id).addClass('alert-info')
.html('

Fine Uploader ファイルアップロードコンポーネントアプリケーションの紹介_PHP チュートリアル

' +
'初期化中 ' +
'"' + ファイル名 + '"');
}
}

onSubmit イベント: ファイルの送信が開始されます。呼び出しパラメーターの形式は次のとおりです: onSubmit:function(id, fileName){}。
onUpload イベント: ファイルのアップロードが開始されます。 : function(id, fileName) {}。
onProgress イベント: ファイルがアップロードされています。呼び出しパラメーターの形式は次のとおりです: onProgress:function(id,fileName,loaded,total){}。ファイルは次のとおりです。呼び出しパラメータの形式は次のとおりです: onComplete:function(id,fileName,responseJSON){ }。
onCancel イベント: ファイルのアップロードをキャンセルします。呼び出しパラメータの形式は次のとおりです: onCancel:function(id,fileName){}
上記の 5 つのイベントは、基本的にファイルのアップロード操作全体のすべてのプロセスをカバーします。これは完全にオープンであり、上記のイベントを呼び出すためのパラメーターの説明は次のとおりです:
Id: ファイルを示します。 Fine Uploder の定義は、デフォルトで 0 からカウントされます。
loaded: サーバーにアップロードされたデータのサイズ。 total: アップロードされるファイルのサイズ
responseJSON: アップロード操作が完了した後に返される Json 形式のデータには、アップロードが成功したかどうかを判断するための IsSuccess 属性が含まれます。アップロードプロセス中にデータをサーバーに転送する場合は、次のパラメーターを使用して制御できます:
params: データをサーバーに転送するために使用されます。パラメーターは、Post メソッドを使用して送信されることに注意してください。サーバー側に渡す一般的なパラメータの形式は次のとおりです:

コードをコピーします

コードは次のとおりです: params: {

argument1: "value1",

argument2: "value2" 
}, 

 
 OK。基本的に、Fine Uploader クライアントの初期化と制御操作のオプションは、IsAuto=false の場合、uploadStoreFiles() メソッドを通じて手動でトリガーできます。定義されている qq.FineUploader オブジェクト: 

コードをコピー

コードは次のとおりです: $('#triggerUpload').click(function() { uploader2.uploadStoredFiles();

} );

 
この時点でアップロードをクリックすると、アップロード サーバーでまだ処理が行われていないことがわかります。 

コードをコピーします。

コードは次のとおりです。 request: { endpoint: 'server/handlerfunction' },

 
この時点で、ファイルのアップロードを処理するPhpファイルをEndPointで指定する必要があります[サーバー側については、まだない場合]。成熟した処理モジュールであるため、公式のサーバー ディレクトリを使用することをお勧めします。ここでは php 環境を使用し、対応するクライアントの変更は次のとおりです。 

 コードをコピーします。次のように:

request:

{ endpoint: 'controller/php.php' }

php.php を開き、ファイルのヘッダーで XMLHttpRequest を処理する 3 つのクラスを定義していることを確認します。 FormPost、および BasicPost ファイルのサーバー側の処理はそれぞれ、ファイルの先頭のコメントで説明されています:

/***************************************** 
このアップローダークラスの使用方法の例... 
次の行 (require を除く) のコメントを解除して、
hese をデフォルトとして使用できます。 

// 有効な拡張子のリスト。例: array("jpeg", "xml", "bmp") 

$allowedExtensions = array();
// バイト単位の最大ファイルサイズ
$sizeLimit = 10 * 1024 * 1024;
//JavaScript で設定された入力名
$inputName = 'qqfile'

require('valums-file-uploader/server/php.php');
$uploader = 新しい qqFileUploader($allowedExtensions, $sizeLimit, $inputName);

// PHP の getcwd() に相対的なフォルダー名を指定して handleUpload() を呼び出します
$result = $uploader->handleUpload('uploads/');

// iframe 経由でデータを渡すには、すべての HTML タグをエンコードする必要があります
header("Content-Type: text/plain");
echo htmlspecialchars(json_encode($result), ENT_NOQUOTES);

/*****************************************/
次のクラス呼び出しメソッドを簡単に追加するだけです。サーバー側の処理を完了します:

コードをコピーします

コードは次のとおりです:

$allowedExtensions = array("jpeg", "jpg", "bmp", "png");

$sizeLimit = 10 * 1024 * 1024 ; $uploader = new qqFileUploader($allowedExtensions, $sizeLimit); $result = $uploader->handleUpload('uploads/'); //アップロードされたファイルのフォルダー echo htmlspecialchars($result) )、ENT_NOQUOTES) ;
allowExtensions は、ファイルのアップロードを許可する形式を定義します。
sizeLimit の上限は、現在の PHP 環境設定を出力するために最初に使用されることに注意してください。 2M. より大きなファイルをアップロードする必要がある場合、php.ini ファイルの設定パラメータの変更についてはここでは説明しません。
uploder は qq.Fileuploder オブジェクトを初期化し、設定をロードします。サーバー側のストレージアップロードファイルのストレージパス。
echo はサーバー側の出力のアップロード結果を必要とします。そうでない場合、クライアントはアップロードステータスを判断するために指定されたレスポンスジェイソンパラメーターを受け入れることができません。サーバーはアップロードを処理し、handleUpload 関数定義を見つけます。

コードをコピーします。コードは次のとおりです。

/*** アップロードされたファイルを処理します * @param string $uploadDirectory

* @param string $replaceOldFile=true

* @returns array('success'=>true) または array('error'=>'error message') 
*/ 
function handleUpload($uploadDirectory, $replaceOldFile = FALSE){ 
if (!is_writable($uploadDirectory)){ 
return array('error' => "サーバー エラー。アップロード ディレクトリは書き込み可能ではありません。"); 
} 

if (!$this->file ){ 
return array('error' => 'ファイルはアップロードされませんでした。'); 

$size = $this ->file->getSize(); 

if ($size == 0) ) { 
return array('error' =>'ファイルが空です'); 
} 

if ($size > $ this->sizeLimit) { 
return array('error' => 'ファイルは空です')大きすぎます'); 
} 

$pathinfo($this->file->getName()); 
$ filename = $pathinfo['filename'] 
//$filename = md5( )); 
$ext = @$pathinfo['extension'];// 拡張子が空の場合は通知を非表示にする 

if($this ->allowedExtensions && !in_array(strto lower($ext), $this->allowedExtensions )){ 
$these = implode(', ', $this->allowedExtensions); 
return array('error' => ; 'ファイルの拡張子は無効です。'. $these . ' のいずれかである必要があります。 '); 
} $ext = ($ext == '') ? $ext : '.' 
 
if(!$replaceOldFile){ 
///アップロードされました 
while (file_exists($uploadDirectory . DIRECTORY_SEPARATOR . $filename . $ext)) { 
$filename .= rand(10, 99) 
} 
} 

$this->uploadName = $ext; 

if ($this->file->save($uploadDirectory . DIRECTORY_SEPARATOR . $filename . $ext)){ 
return array('success'=>true) 
} else { 
return array(' error'=> 'アップロードされたファイルを保存できませんでした' 
} 

} 

 
したがって、受信パスは次のようにフォーマットする必要があります。 
$uploadDirectory = $_SERVER['DOCUMENT_ROOT ']."DS".$uploadDirectory; 個人的には、is_writeable ファイルの詳細が十分ではないと思います。 is_writeable は主にファイルまたはディレクトリが存在するかどうかを判断するため、is_writable の前にファイルが存在するかどうかを判断しやすくすることを個人的にお勧めします。サーバー側のファイルエラーの状況: 



コードをコピー

 コードは次のとおりです:

if (!file_exists($uploadDirectory)) {
return array(' error' => "サーバーエラー。アップロードディレクトリが存在しません。");
}

ファイル保存操作の前に、処理関数がアップロードされたファイルの数、アップロードされたファイルのサイズ、ファイルのアップロードサイズが上限を超えているかどうか、アップロード処理中にそれぞれ 4 つの判断を行っていることがわかります。サーバー側で同じファイルをアップロードしたい場合、Fine Uploder の処理方法は書き換えではなく、ファイルに 10 から 99 までの乱数を付けて名前を付けてディレクトリに保存することがわかります。ファイルが正常に保存されると、サーバー側はアップロード操作が成功したかどうかを指定する IsSuccess を含む Json データを返します。IsSuccess パラメーターは、アップロード操作中にクライアントが操作を決定するための唯一のパラメーターとして使用されます。実際、この問題に対処するには、アップロードファイルの設定が PHP 環境のデフォルトの 2M を超えていることが主な原因です。値を変更する必要があります。 php.ini ファイルの post_max_size と Upload_max_filesize を 10M を超えて変更し、Apache を再起動するか、Php 公式 Web サイトで設定手順を参照してください。 php.ini 設定ファイルを変更します。これで、Fine Uploader の設定プロセス全体が完了しました。クリックしてファイルを選択すると、次のような効果が表示されます:

もちろん、詳細については、上記の Fine Uploader Analyze の公式デモを参照してください。ソースコードの観点から見た原理
2013-01-04_191128

http://www.bkjia.com/PHPjc/326398.html

Fine Uploader ファイルアップロードコンポーネントアプリケーションの紹介_PHP チュートリアル