写真をアップロードするjQueryのファイルアップロードプロセス

最初のトリガ_onChange] [jquery.fileupload.js

_onChange:関数(E){
この= VAR、
データ= {
FileInputクラス:$(e.target)、
形式:$(e.target.form)
}。
this._getFileInputFiles(data.fileInput).always(関数(ファイル){
data.files =ファイル、
IF(that.options.replaceFileInput){
that._replaceFileInput(データ);
}
もし(that._trigger(
'変更'、
$ .Event( '変更'、{delegatedEvent:E})、
データ
!)==偽){
that._onAdd(例えば、データ);
}
})。
}、

次いで_onAdd] [jquery.fileupload.jsをトリガ

$の.each(ファイルセット||ファイル、関数(指数、エレメント){
VARあるnewData = $ .extend({}、データ);
newData.files =ファイルセット要素:[要素];
newData.paramName = paramNameSet [インデックス]。
that._initResponseObject(あるnewData);
that._initProgressObject(あるnewData);
that._addConvenienceMethods(E、あるnewData);
結果= that._trigger(
'追加'、
$ .Event( '追加'、{delegatedEvent:E})、
あるnewData
) ;
;結果を返します
)}。

その後、追加トリガー[jquery.fileupload-process.js]

追加:機能(E、データ){
変数$を、これは$(this)を=。
data.process(関数(){
)、データを$ this.fileupload( 'プロセス'を返します;
});
originalAdd.call(本、例えば、データ)。
}

その後data.process] [jquery.fileupload.js

://は、データコールバック引数に便利なメソッド追加
_addConvenienceMethods:機能(E、データ){
これを= VAR、
getPromise =関数(引数){
。返す$ .Deferred()resolveWith(つまり、引数).promiseを();
}。
data.process =関数(resolveFunc、rejectFunc){
IF(resolveFunc || rejectFunc){
data._processQueue = this._processQueue =
(this._processQueue || getPromise([本]))。次いで、(
関数(){
IF(データ.errorThrown){
$ .Deferred()を返す
; .rejectWith(すなわち、[データ])約束()
}
getPromise(引数)を返す;
}
).then(resolveFunc、rejectFunc)を、
}
this._processQueueを返す|| getPromise([本])。
}。

[] jquery.jsで、その後の定義

その後:機能(/ * fnDone、fnFail、fnProgress * /){
VARのFNSの=引数。
jQuery.Deferred(関数(newDefer){戻り
jQuery.each(タプル、関数(I、タプル){
VARは、fn = jQuery.isFunction(FNS [I])&& FNSを[I];
//は延期[行わ|失敗|進歩] newDeferにアクションを転送するため
延期[タプル[1](関数(){
varが)= FN && fn.apply(この引数返さ;
IF(戻さ&& jQuery.isFunction(returned.promise)){
returned.promise( )
の.done(newDefer.resolve)
.fail(newDefer.reject)
.progress(newDefer.notify);
}他{
newDefer [タプル[0] + "と"](この===約束newDefer.promise(?): ?これは、FN [返却]:引数);
}
})。
});
FNS = NULL;
})。約束する();
}、

次に呼び出す前に機能を追加するためにバック$ this.fileuploadを

追加:機能(E、データ){
変数$を、これは$(this)を=。
data.process(関数(){
戻り$ this.fileupload)、データ( 'プロセス';
});
originalAdd.call(本、例えば、データ)。
}

[次に] jquery.fileupload-process.js

//は、データパラメータのファイルのプロパティとして指定されたファイルを処理
コールバックを結合することを可能にするプロミスオブジェクトを返す//:
プロセス:機能(データ){
この= VAR、
オプション= $ .extend({}、this.options 、データ)。
(options.processQueue && options.processQueue.length){もし
この。_transformProcessQueue(オプション)。

または[jquery.fileupload-process.js]

//各processQueue項目の設定を置き換え
//文字列は、残りの使用して、「@」で始まるされている
オプションマップのキーとして//ストリングは、
//例えば「@autoUploadが」options.autoUploadに置き換えられます。
_transformProcessQueue:機能(オプション){
VAR processQueue = [];

そして、バック] [jquery.fileupload.js

//追加コールバックは、すぐにファイルがファイルアップロードに追加されると呼び出されます
。//ウィジェット(ファイル入力の選択を経由して、ドラッグ&ドロップ、ペーストまたはAPIの呼び出しを追加します)。
singleFileUploadsオプションが有効になっている場合は、//、このコールバックはされます
//他に、XHRファイルアップロードのための選択の各ファイルに1回呼び出さ
各ファイルを選択するための//一回。
//
提出方法は、データパラメータに呼び出されたときに//アップロードが開始されます。
//データオブジェクトが追加されたファイルを保持しているファイルのプロパティを含む
//、あなたはプラグインのオプションをオーバーライドするだけでなく、AJAXの設定を定義することができます。
//
このコールバックの//リスナーにも次のようにバインドすることができます:
// .bind(「fileuploadadd」、FUNC)。
//
// data.submit()プロミスオブジェクトを返し、追加接続することができます
jQueryの繰延コールバックを使用して//ハンドラを:
// data.submit()済(FUNC).fail(FUNC).always(FUNC)。
追加:機能(例えば、データ){
IF(e.isDefaultPrevented()){
falseを返します。
}

帰ります

追加:機能(E、データ){
変数$を、これは$(this)を=。
data.process(関数(){
)、データを$ this.fileupload( 'プロセス'を返します;
});
originalAdd.call(本、例えば、データ)。
}

 

 

( 'fileuploadadd'、機能(E、データ){上
にconsole.log(data.files);
はconsole.log(data.files.length);
//は、<DIV />ファイルコンテナの下に追加
data.context = $( '<DIV />')appendTo。( '#ファイル');
$ .each(data.files、機能(インデックス、ファイル){
はconsole.log(インデックス);
はconsole.log(ファイル);
//追加します< P />のdivの下
のvarノード= $( '<P />')
.append($( '<スパン/>')、テキスト(file.name)。);

!VARフラグ=インデックス。
console.log(フラグ)。
もし(フラグ){
//マルチファイルをアップロードし、<BR/>によってそれらを分割する場合は
ノード
.append( '<BR>')
ボタンクローン//
.appendを(uploadButton.clone(真).dataの(データ));
}
node.appendTo(data.context)。
});

 

processQueue内部で定義jquery.fileupload-image.jsによる画像プレビュー機能が自動的に処理します

$ .blueimp.fileupload.prototype.options.processQueue.unshift(
{
アクション: 'loadImageMetaData'、
disableImageHead: '@'、
disableExif: '@'、
disableExifThumbnail: '@'、
disableExifSub: '@'、
disableExifGps: '@' 、
無効: '@disableImageMetaDataLoad'
}、

 jquery.fileupload-process.jsの定義に依存processQueue

$ .widget( 'blueimp.fileupload'、$ .blueimp.fileupload、{ 

オプション:{
//処理するアクションのリスト:
processQueue:[
/ *
{
アクション: 'ログイン'、
種類: 'デバッグ'
}
* /
]、

loadImage.parseMetaData依赖于load-image-meta.js中的parseMetaData

loadImageMetaData:機能(データ、オプション){ 
IF(options.disabled){
戻りデータ;
}
この= VAR、
DFD = $ .Deferred();
loadImage.parseMetaData(data.files [data.index]、関数(結果){
$ .extend(データ、結果);
dfd.resolveWith(すなわち、[データ]);
}、オプション)。
dfd.promise返します();
}、


ロード・画像meta.jsは、負荷image.js loadImage.blobSliceに依存しています

resizeImage機能でjquery.fileupload-image.jsはloadImage.scale負荷-画像scale.jsに依存しています

IF(IMG){
解決(loadImage.scale(IMG、オプション))。
dfd.promise返します();
}

 

おすすめ

転載: www.cnblogs.com/chucklu/p/11110735.html