Kongsi 2 jQuery plug-in-jquery.fileupload dan artdialog

Kongsi 2 jQuery plug-in-jquery.fileupload dan artdialog_jquery

WBOY

Lepaskan： 2016-05-16 16:24:21

asal

1096 orang telah melayarinya

Ini adalah perkara penting dalam projek kami, jadi hari ini saya mengesyorkan dua pemalam jquery yang dipanggil artdialog, yang merupakan iframe, dan satu dipanggil muat naik fail jquery. Saya melihat bahawa terdapat sangat sedikit tutorial tentang cara menggunakan pemalam ini. dalam muat naik fail jquery di Internet Hari ini saya akan memperkenalkan dan menulis secara ringkas beberapa kaedah menggunakannya!
Contoh mudah menggunakan kod
Kaedah pengecilan

Salin kod Kod adalah seperti berikut:

url data ialah kaedah php yang melaksanakan fail yang dimuat naik selepas memuat naik

$(fungsi () {
$('#fileupload').fileupload({
dataType: 'json', //transmisi josn
done: function (e, data) { //Laksanakan selepas memuat naik
$.each(data.result.files, function (index, file) {
$('

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

Kembangkan sedikit

Salin kod Kod adalah seperti berikut:

$(fungsi(){
//API lengkap ada di sinihttps://github.com/blueimp/jQuery-File-Upload/wiki/API Saya hanya akan memperkenalkan beberapa arahan yang biasa digunakan
$("#fileupload").fileupload('option',{ //Tetapkan acara muat naik
url: 'http://localhost/php/index.php' //Nyatakan kaedah muat naik php
disableImageResize: /Android(?!.*Chrome)|Opera/
               .test(window.navigator.userAgent),                                                                                                                      .                                                                                                                                                                                                                                                                                                 untuk                      acceptFileTypes: /(.|/)(rar|zip|jp?g|png|bmp)$/i, //Tetapkan jenis muat naik
});
$.ajax({
url: $('#fileupload').fileupload('option', 'url'), //Mengikut pilihan tetapan penghantaran ajax
              dataJenis: 'json',
konteks: $('#fileupload')[0]
           }).selesai(fungsi (hasil) {
               $(this).fileupload('option','done'
).call(this, $.Event('done'), {result: result}); //Perkara yang perlu dilakukan selepas muat naik selesai
                                                                    });
           $('#fileupload').bind('fileuploaddone',function(e,data){ //Ikat peristiwa yang muat naik selesai
$.each(data.result.files, fungsi (indeks,fail){
untuk(var i dalam fail){
makluman(i ':' fail[i])
            }
});
//Terlalu banyak peristiwa terikat Jika anda menterjemahkannya secara langsung, anda akan memahami maksudnya
          $('#fileupload')
.bind('fileuploadadd', fungsi (e, data) {/* ... */})
.bind('fileuploadsubmit', fungsi (e, data) {/* ... */})
.bind('fileuploadsend', function (e, data) {/* ... */})
.bind('fileuploaddone', function (e, data) {/* ... */})
.bind('fileuploadfail', function (e, data) {/* ... */})
.bind('fileuploadalways', function (e, data) {/* ... */})
.bind('fileuploadprogress', fungsi (e, data) {/* ... */})
.bind('fileuploadprogressall', fungsi (e, data) {/* ... */})
.bind('fileuploadstart', function (e) {/* ... */})
.bind('fileuploadstop', function (e) {/* ... */})
.bind('fileuploadchange', fungsi (e, data) {/* ... */})
.bind('fileuploadpaste', fungsi (e, data) {/* ... */})
.bind('fileuploaddrop', fungsi (e, data) {/* ... */})
.bind('fileuploaddragover', function (e) {/* ... */})
.bind('fileuploadchunksend', fungsi (e, data) {/* ... */})
.bind('fileuploadchunkdone', fungsi (e, data) {/* ... */})
.bind('fileuploadchunkfail', function (e, data) {/* ... */})
.bind('fileuploadchunkalways', fungsi (e, data) {/* ... */});
});
});

Memandangkan pemalam ini sangat berkuasa dan mempunyai terlalu banyak kaedah dan API, anda boleh melihat API di tapak web rasmi terlebih dahulu, anda juga boleh bertanya kepada saya jika anda tidak faham!

Yang kedua sebenarnya adalah ArtDialog yang sangat mudah Ia dibangunkan oleh orang Cina Semua API adalah dalam bahasa Cina, jadi pelajar boleh memahaminya secara sepintas lalu apabila iframe ditutup?

Salin kod Kod adalah seperti berikut:

pemprosesan jquery

fungsi nihao(){
art.dialog.open( //Buka fail jauh iframe
"
http://localhost/dialog/index2.html", {
Tajuk: "Halaman Pengujian",
lebar: 320,
ketinggian: 400,
Tutup : function(){
//Dilaksanakan apabila iframe ditutup
alert("tuhanku tertutup")
}
}
);
}

Serah

Saya mahu memindahkan kembali data index2.html Sudah tentu, index2 saya akan memindahkan data kembali ke iframe induk apabila saya mengklik pada X. Bagaimana saya boleh melakukan ini?

Salin kod Kod adalah seperti berikut:

pemprosesan jquery

var asal = artDialog.open.origin;
var v = origin.document.getElementById('nihao');
v.value = document.getElementById('chushu').value;

Sudah tentu data tidak dihantar dengan mengklik butang Itu sahaja!