2 つの jQuery プラグインを共有する - jquery.fileupload および artdialog_jquery

これらは私たちのプロジェクトに不可欠なものなので、今日は iframe である artdialog と呼ばれる 2 つの jquery プラグインと、jquery file Upload と呼ばれる 2 つの jquery プラグインをお勧めします。このプラグインの使用方法に関するチュートリアルはほとんどありません。 in jquery ファイルをインターネット上にアップロードする方法を今日は簡単に紹介し、メモしていきます！
コードを使用した簡単な例
最小化法

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

data-url は
をアップロードした後にアップロードされたファイルを実行する php メソッドです。

<スクリプト src="js/vendor/jquery.ui.widget.js">
<スクリプト src="js/jquery.iframe-transport.js">
<スクリプト src="js/jquery.fileupload.js">
<スクリプト>
$(関数() {
$('#fileupload').fileupload({
dataType: 'json', //josn 送信
完了: function (e, data) { //アップロード後に実行
$.each(data.result.files, function (index, file) {
$('

').text(file.name).appendTo(document.body);
});
}
});
});

少し拡大してください

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

<スクリプト src="js/vendor/jquery.ui.widget.js">
<スクリプト src="js/jquery.iframe-transport.js">
<スクリプト src="js/jquery.fileupload.js">
<スクリプト>
$(関数(){
//完全な API はここにありますhttps://github.com/blueimp/jQuery-File-Upload/wiki/API 一般的に使用される手順をいくつか紹介します
$("#fileupload").fileupload('option',{ //アップロード イベントを設定します
url: 'http://localhost/php/index.php' //phpのアップロード方法を指定
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent)、 。 に acceptFileTypes: /(.|/)(rar|zip|jp?g|png|bmp)$/i, //アップロードタイプを設定します
});
$.ajax({
url: $('#fileupload').fileupload('option', 'url'), //設定オプションに従いajax送信
データ型: 'json',
コンテキスト: $('#fileupload')[0]
}).done(関数 (結果) {
$(this).fileupload('option','done'
).call(this, $.Event('done'), {result: result}); //アップロード完了後に行うこと
                                                                      });
$('#fileupload').bind('fileuploaddone',function(e,data){ //アップロードが完了したイベントをバインドします
$.each(data.result.files, function (index,file){
for(ファイル内の変数 i){
アラート(i ':' ファイル[i])
}
});
//バインドされたイベントが多すぎるので直訳すると意味が分かります
$('#fileupload')
.bind('fileuploadadd', function (e, data) {/* ... */})
.bind('fileuploadsubmit', function (e, data) {/* ... */})
.bind('fileuploadsend', function (e, data) {/* ... */})
.bind('fileuploaddone', function (e, data) {/* ... */})
.bind('fileuploadfail', function (e, data) {/* ... */})
.bind('fileuploadalways', function (e, data) {/* ... */})
.bind('fileuploadprogress', function (e, data) {/* ... */})
.bind('fileuploadprogressall', function (e, data) {/* ... */})
.bind('fileuploadstart', function (e) {/* ... */})
.bind('fileuploadstop', function (e) {/* ... */})
.bind('fileuploadchange', function (e, data) {/* ... */})
.bind('fileuploadpaste', function (e, data) {/* ... */})
.bind('fileuploaddrop', function (e, data) {/* ... */})
.bind('fileuploaddragover', function (e) {/* ... */})
.bind('fileuploadchunksend', function (e, data) {/* ... */})
.bind('fileuploadchunkdone', function (e, data) {/* ... */})
.bind('fileuploadchunkfail', function (e, data) {/* ... */})
.bind('fileuploadchunkalways', function (e, data) {/* ... */});
});
});

このプラグインは非常に強力でメソッドや API が多すぎるので、最初に公式 Web サイトの API を見ていただいても構いません。もちろん、わからない場合は私に質問することもできます。

2 つ目は、実際には非常にシンプルな ArtDialog で、すべての API が中国語で書かれているので、学生は一目で理解できます。ここでは、データの送信方法について説明します。 iframeが閉じているとき?

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

<スクリプト src="jquery.mini.js">





<スクリプト>
関数ニーハオ(){
art.dialog.open( //iframe リモート ファイルを開きます
"http://localhost/dialog/index2.html",
{
タイトル: "テスト ページ"、
幅: 320、
高さ: 400、
閉じる: function(){
//iframe が閉じられたときに実行されます
alert("私の神は閉まっています")
}
}
);
}



送信

index2.html データを転送したいのですが、もちろん、X をクリックすると、index2 はすでにデータを親 iframe に転送します。以下のコードは、どうすればよいでしょうか。

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

<スクリプト src="jquery.mini.js">







<スクリプト>
varorigin = artDialog.open.origin;
var v = Origin.document.getElementById('nihao');
v.value = document.getElementById('chushu').value;

もちろん、クリックしてもデータは送信されません。