Share 2 jQuery plug-ins-jquery.fileupload and artdialog_jquery

These are essential things in our project, so today I recommend two jquery plug-ins called artdialog, which is an iframe, and one called jquery file upload. I see that there are very few tutorials on how to use this plug-in jquery file upload on the Internet. Today I will briefly introduce and write down some methods of using it!
A simple example using code
Minimization method

Copy code The code is as follows:

data-url is a php method that executes the uploaded file after uploading





<script><br /> $(function () {<br /> $('#fileupload').fileupload({<br />          dataType: 'json', //josn transmission<br /> ​​​​ done: function (e, data) { //Execute after uploading<br />                  $.each(data.result.files, function (index, file) {<br /> $('<p/>').text(file.name).appendTo(document.body);<br />             });<br /> }<br /> });<br /> });<br /> </script>

Expand it a little

Copy code The code is as follows:

<script><br /> $(function(){<br /> //The complete API is here<a href="https://github.com/blueimp/jQuery-File-Upload/wiki/API">https://github.com/blueimp/jQuery-File-Upload/wiki/API I will simply introduce some commonly used instructions<br /> $("#fileupload").fileupload('option',{ //Set upload event<br /> url: 'http://localhost/php/index.php' //Specify php upload method<br /> disableImageResize: /Android(?!.*Chrome)|Opera/<br />                .test(window.navigator.userAgent),                                                                                                                  .                                                                                                                                                                                                                                                   to                     acceptFileTypes: /(.|/)(rar|zip|jp?g|png|bmp)$/i, //Set the upload type<br /> });<br /> $.ajax({<br /> ​​​​​​ url: $('#fileupload').fileupload('option', 'url'), //According to the setting option ajax transmission<br />               dataType: 'json',<br /> context: $('#fileupload')[0]<br />            }).done(function (result) {<br />                $(this).fileupload('option','done'<br /> ).call(this, $.Event('done'), {result: result}); //Things to do after the upload is completed<br />                                                                               });<br />            $('#fileupload').bind('fileuploaddone',function(e,data){ //Bind the event that the upload is completed <br /> $.each(data.result.files, function (index,file){<br /> for(var i in file){<br /> alert(i ':' file[i])<br />             }<br />         });<br /> //There are too many bound events. If you translate it directly, you will understand what it means<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>

Since this plug-in is very powerful and has too many methods and APIs, you can take a look at the API on the official website first. Of course, you can also ask me if you don’t understand!

The second one is actually very simple ArtDialog. It was developed by Chinese people. All the APIs are in Chinese, so students can understand it at a glance. Here I will talk about one thing, that is, how to transmit data when the iframe is closed?

Copy code The code is as follows:

<script><br /> function nihao(){<br /> art.dialog.open( //Open an iframe remote file<br /> "<a href="http://localhost/dialog/index2.html">http://localhost/dialog/index2.html",<br /> {<br /> Title: "Testing Page",<br /> width: 320, <br /> height: 400,<br /> Close : function(){<br /> //Executed when the iframe is closed <br /> alert("my god is closed")<br /> }<br /> }<br /> );<br /> }<br /> </script>


Submit

I want to transfer the index2.html data back. Of course, my index2 will already transfer the data back to the parent iframe when I click on X. How can I do this? The code below is

Copy code The code is as follows:

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

Of course the data is not transmitted by clicking the That’s it!