Heim > Web-Frontend > js-Tutorial > Teilen Sie 2 jQuery-Plugins-jquery.fileupload und artdialog_jquery

Teilen Sie 2 jQuery-Plugins-jquery.fileupload und artdialog_jquery

WBOY
Freigeben: 2016-05-16 16:24:21
Original
1099 Leute haben es durchsucht

Dies sind wesentliche Dinge in unserem Projekt, daher empfehle ich heute zwei JQuery-Plug-Ins namens Artdialog, bei denen es sich um einen IFrame handelt, und eines namens JQuery-Datei-Upload. Ich sehe, dass es nur sehr wenige Tutorials zur Verwendung dieses Plug-Ins gibt. Beim Hochladen von JQuery-Dateien im Internet werde ich heute einige Methoden zur Verwendung kurz vorstellen und aufschreiben!
Ein einfaches Beispiel mit Code
Minimierungsmethode

Code kopieren Der Code lautet wie folgt:

data-url ist eine PHP-Methode, die die hochgeladene Datei nach dem Hochladen
ausführt




<script><br> $(function () {<br> $('#fileupload').fileupload({<br>          dataType: 'json', //josn-Übertragung<br> ​​​​ erledigt: function (e, data) { //Nach dem Hochladen ausführen<br>                  $.each(data.result.files, function (index, file) {<br> $('<p/>').text(file.name).appendTo(document.body);<br>             });<br> }<br> });<br> });<br> </script>

Erweitern Sie es ein wenig

Code kopieren Der Code lautet wie folgt:






<script><br> $(function(){<br> //Die vollständige API finden Sie hier<a href="https://github.com/blueimp/jQuery-File-Upload/wiki/API">https://github.com/blueimp/jQuery-File-Upload/wiki/API</a>Ich werde lediglich einige häufig verwendete Anweisungen vorstellen<br> $("#fileupload").fileupload('option',{ //Upload-Ereignis festlegen<br> URL: 'http://localhost/php/index.php' //PHP-Upload-Methode angeben<br> disableImageResize: /Android(?!.*Chrome)|Opera/<br>                .test(window.navigator.userAgent),                                                                                                            . Zu                    acceptFileTypes: /(.|/)(rar|zip|jp?g|png|bmp)$/i, //Legen Sie den Upload-Typ fest<br> });<br> $.ajax({<br> ​​​​​​ URL: $('#fileupload').fileupload('option', 'url'), // Gemäß der Einstellungsoption Ajax-Übertragung<br>               dataType: 'json',<br> Kontext: $('#fileupload')[0]<br>            }).done(function (result) {<br>                $(this).fileupload('option','done'<br> ).call(this, $.Event('done'), {result: result}); //Was nach Abschluss des Uploads zu tun ist<br>                                                                   });<br>            $('#fileupload').bind('fileuploaddone',function(e,data){ //Binde das Ereignis, dass der Upload abgeschlossen ist <br> $.each(data.result.files, function (index,file){<br> for(var i in file){<br> alarm(i ':' file[i])<br>             }<br> });<br> //Es gibt zu viele gebundene Ereignisse. Wenn Sie es direkt übersetzen, werden Sie verstehen, was es bedeutet<br>           $('#fileupload')<br> .bind('fileuploadadd', function (e, data) {/* ... */})<br> .bind('fileuploadsubmit', function (e, data) {/* ... */})<br> .bind('fileuploadsend', function (e, data) {/* ... */})<br> .bind('fileuploaddone', function (e, data) {/* ... */})<br> .bind('fileuploadfail', function (e, data) {/* ... */})<br> ​ .bind('fileuploadalways', function (e, data) {/* ... */})<br> .bind('fileuploadprogress', function (e, data) {/* ... */})<br> ​ .bind('fileuploadprogressall', function (e, data) {/* ... */})<br> .bind('fileuploadstart', function (e) {/* ... */})<br> .bind('fileuploadstop', function (e) {/* ... */})<br> ​ .bind('fileuploadchange', function (e, data) {/* ... */})<br> .bind('fileuploadpaste', function (e, data) {/* ... */})<br> .bind('fileuploaddrop', function (e, data) {/* ... */})<br> .bind('fileuploaddragover', function (e) {/* ... */})<br> .bind('fileuploadchunksend', function (e, data) {/* ... */})<br> ​ .bind('fileuploadchunkdone', function (e, data) {/* ... */})<br> .bind('fileuploadchunkfail', function (e, data) {/* ... */})<br> ​ .bind('fileuploadchunkalways', function (e, data) {/* ... */});<br> });<br> });<br></script>

Da dieses Plug-in sehr leistungsfähig ist und zu viele Methoden und APIs hat, können Sie sich zuerst die API auf der offiziellen Website ansehen. Wenn Sie es nicht verstehen, können Sie mich natürlich auch fragen!

Das zweite ist eigentlich ein sehr einfaches ArtDialog. Es wurde von Chinesen entwickelt, sodass die Schüler es auf einen Blick verstehen können, nämlich wie man Daten überträgt wann ist der iframe geschlossen?

Code kopieren Der Code lautet wie folgt:




jquery-Verarbeitung

<script><br> Funktion nihao(){<br> art.dialog.open( //Öffne eine Iframe-Remote-Datei<br> „<br>http://localhost/dialog/index2.html<a href="http://localhost/dialog/index2.html">“,</a> {<br> Titel: „Testseite“,<br> Breite: 320, <br> Höhe: 400,<br> Schließen: function(){<br> //Wird ausgeführt, wenn der Iframe geschlossen ist <br> alarm("mein Gott ist geschlossen")<br> }<br> }<br> );<br> }<br> </script>


Senden

Ich möchte die Daten von index2.html zurückübertragen, wenn ich auf X klicke. Der Code unten ist

Code kopieren Der Code lautet wie folgt:



jquery-Verarbeitung



<script><br> var origin = artDialog.open.origin;<br> var v = origin.document.getElementById('nihao');<br> v.value = document.getElementById('chushu').value;<br> </script>


Selbstverständlich erfolgt keine Datenübermittlung durch das Anklicken des Buttons „Das war's!“.
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage