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
<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?
<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!“.
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