Partager 2 plug-ins jQuery-jquery.fileupload et artdialog_jquery

Ce sont des choses essentielles dans notre projet, donc aujourd'hui je recommande deux plug-ins jquery appelés artdialog, qui est une iframe, et un appelé jquery file upload. Je vois qu'il y a très peu de tutoriels sur la façon d'utiliser ce plug-in. dans le téléchargement de fichiers jquery sur Internet. Aujourd'hui, je vais brièvement présenter et écrire quelques méthodes d'utilisation !
Un exemple simple utilisant du code
Méthode de minimisation

Copier le code Le code est le suivant :

data-url est une méthode php qui exécute le fichier téléchargé après le téléchargement





<script><br> $(fonction () {<br> $('#fileupload').fileupload({<br>          dataType : 'json', //transmission josn<br> ​​​​ done: function (e, data) { //Exécuter après le téléchargement<br>                  $.each(data.result.files, fonction (index, fichier) {<br> $('<p/>').text(file.name).appendTo(document.body);<br>             });<br> ><br> });<br> });<br> </script>

Développez-le un peu

Copier le code Le code est le suivant :

<script><br> $(fonction(){<br> //L'API complète est ici<a href="https://github.com/blueimp/jQuery-File-Upload/wiki/API">https://github.com/blueimp/jQuery-File-Upload/wiki/API</a> Je vais simplement présenter quelques instructions couramment utilisées<br> $("#fileupload").fileupload('option',{ //Définir l'événement de téléchargement<br> url : 'http://localhost/php/index.php' //Spécifiez la méthode de téléchargement php<br> DisableImageResize : /Android(?!.*Chrome)|Opera/<br>                .test(window.navigator.userAgent),                                                                                                                  . à                     acceptFileTypes : /(.|/)(rar|zip|jp?g|png|bmp)$/i, //Définir le type de téléchargement<br> });<br> $.ajax({<br> ​​​​​​ url : $('#fileupload').fileupload('option', 'url'), //Selon l'option de paramétrage de la transmission ajax<br>               Type de données : 'json',<br> contexte : $('#fileupload')[0]<br>            }).done(fonction (résultat) {<br>                $(this).fileupload('option','done'<br> ).call(this, $.Event('done'), {result: result}); //Choses à faire une fois le téléchargement terminé<br>                                                                              });<br>            $('#fileupload').bind('fileuploaddone',function(e,data){ // Lier l'événement selon lequel le téléchargement est terminé <br> $.each(data.result.files, fonction (index,fichier){<br> pour(var i dans le fichier){<br> alerte(i ':' fichier[i])<br>             }<br>         });<br> //Il y a trop d'événements liés. Si vous le traduisez directement, vous comprendrez ce que cela signifie<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', fonction (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>

Comme ce plug-in est très puissant et possède trop de méthodes et d'API, vous pouvez d'abord jeter un œil à l'API sur le site officiel. Bien sûr, vous pouvez également me demander si vous ne comprenez pas !

Le second est en fait très simple ArtDialog. Il a été développé par des Chinois, toutes les API sont en chinois, donc les étudiants peuvent le comprendre en un coup d'œil. Ici, je vais parler d'une chose, c'est-à-dire comment transmettre des données. quand l'iframe est fermée ?

Copier le code Le code est le suivant :

<script><br> fonction nihao(){<br> art.dialog.open( //Ouvrir un fichier distant iframe<br> "<br>http://localhost/dialog/index2.html<a href="http://localhost/dialog/index2.html">",</a> {<br> Titre : "Page de test",<br> largeur : 320, <br> hauteur : 400,<br> Fermer : function(){<br> //Exécuté lorsque l'iframe est fermé <br> alert("mon dieu est fermé")<br> ><br> ><br> );<br> ><br> </script>


Soumettre

Je souhaite retransférer les données index2.html Bien sûr, mon index2 transférera déjà les données vers l'iframe parent lorsque je clique sur X. Comment puis-je faire cela ?

Copier le code Le code est le suivant :

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



Bien sûr, les données ne sont pas transmises en cliquant sur le bouton Ça y est !