These are essential things in our project, so today we recommend two a jquery plug-in called Artdialog is an iframe, a jquery file upload, I see very few online plug-ins jquery file Upload plugin use tutorial, Today I will simply introduce and write a little use of the method!
Simply use code to cite examples
Method of minimizing
Copy Code code as follows:
Data-url is the PHP method for uploading files after uploading
<input id= "FileUpload" type= "file" name= "files[" "Data-url=" server/php/"multiple>"
<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src= "Js/vendor/jquery.ui.widget.js" ></script>
<script src= "Js/jquery.iframe-transport.js" ></script>
<script src= "Js/jquery.fileupload.js" ></script>
<script>
$ (function () {
$ (' #fileupload '). FileUpload ({
DataType: ' JSON ',//JOSN transmission
Done:function (E, data) {//upload completed after execution
$.each (data.result.files, function (index, file) {
$ (' <p/> '). Text (file.name). Appendto (Document.body);
});
}
});
});
</script>
Extend it a little bit
Copy Code code as follows:
<input id= "FileUpload" type= "file" Name= "files[" multiple>
<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src= "Js/vendor/jquery.ui.widget.js" ></script>
<script src= "Js/jquery.iframe-transport.js" ></script>
<script src= "Js/jquery.fileupload.js" ></script>
<script>
$ (function () {
The complete API is here Https://github.com/blueimp/jQuery-File-Upload/wiki/API I simply introduce some common instructions
$ ("#fileupload"). FileUpload (' option ', {//Set upload Event
URL: ' http://localhost/php/index.php '//Specify PHP upload method
Disableimageresize:/android (?!. *chrome) | opera/
. Test (Window.navigator.userAgent),//disable generation of thumbnails
maxfilesize:5000000//Set maximum size supported
Acceptfiletypes:/(\.| \/) (rar|zip|jp?g|png|bmp) $/i,//Set the type of upload
});
$.ajax ({
URL: $ (' #fileupload '). FileUpload (' option ', ' URL '),//AJAX transmission based on setup options
DataType: ' JSON ',
Context: $ (' #fileupload ') [0]
). Done (function (result) {
$ (this). FileUpload ("option", ' Done ')
). Call (this, $. Event (' Done '), {result:result}); Things to do after uploading
});
$ (' #fileupload '). Bind (' Fileuploaddone ', function (e,data) {//Bind upload completed Event
$.each (data.result.files, function (index, file) {
for (var i in file) {
Alert (i+ ': ' +file[i])
}
});
There are too many bound events. You can understand what you mean by translating it directly.
$ (' #fileupload ')
. bind (' Fileuploadadd ', function (e, data) {/* ... */})
. bind (' Fileuploadsubmit ', function (e, data) {/* ... */})
. bind (' Fileuploadsend ', function (e, data) {/* ... */})
. bind (' Fileuploaddone ', function (e, data) {/* ... */})
. bind (' Fileuploadfail ', function (e, data) {/* ... */})
. bind (' Fileuploadalways ', function (e, data) {/* ... */})
. bind (' fileuploadprogress ', function (e, data) {/* ... */})
. bind (' Fileuploadprogressall ', function (e, data) {/* ... */})
. bind (' Fileuploadstart ', function (e) {/* ... */})
. bind (' Fileuploadstop ', function (e) {/* ... */})
. bind (' Fileuploadchange ', function (e, data) {/* ... */})
. bind (' Fileuploadpaste ', function (e, data) {/* ... */})
. bind (' Fileuploaddrop ', function (e, data) {/* ... */})
. bind (' Fileuploaddragover ', function (e) {/* ... */})
. bind (' Fileuploadchunksend ', function (e, data) {/* ... */})
. bind (' Fileuploadchunkdone ', function (e, data) {/* ... */})
. bind (' Fileuploadchunkfail ', function (e, data) {/* ... */})
. bind (' Fileuploadchunkalways ', function (e, data) {/* ... */});
});
});
</script>
Because this plug-in function is very powerful, methods and APIs too many people can first look at the official website API, of course, do not understand also can ask me!
The second one is actually very simple artdialog, the people developed, all the APIs are Chinese, so the students will be a look, here I say one, is the IFRAME off how to transfer data?
Copy Code code as follows:
<script src= "Jquery.mini.js" ></script>
<script src= "Artdialog.js?skin=default" ></script>
<script src= "./plugins/iframetools.js" ></script>
<script src= "./skins/idialog.css" ></script>
Processing </title> of <title>jquery
<script>
function Nihao () {
Art.dialog.open (//Open an IFRAME remote file
"Http://localhost/dialog/index2.html",
{
Title: "Test Page",
width:320,
height:400,
Close:function () {
The execution of an IFRAME when it is closed
Alert ("My God is Off")
}
}
);
}
</script>
<body>
<input type= "text" id= "Nihao" value= "test Data"/>
<a href= "Javascript::nihao ()" onclick= "Nihao ()" > Submit </a>
I'm going to send the index2.html data back, of course, my index2 is going to click X when I have to transfer the data back to the framework of the parent iframe, the bottom code
Copy Code code as follows:
<script src= "Jquery.mini.js" ></script>
<script src= "Artdialog.js?skin=default" ></script>
<script src= "./plugins/iframetools.js" ></script>
<script src= "./skins/idialog.css" ></script>
Processing </title> of <title>jquery
<body>
<input type= "text" id= "Chushu" value= "2222111"/>
<script>
var origin = ArtDialog.open.origin;
var v = origin.document.getElementById (' Nihao ');
V.value = document.getElementById (' Chushu '). Value;
</script>
Of course the data is not clicked on the X-button transmission can be brought with the Art.dialog.data (' Test ', Val); this way to transmit!! The matter hastily writes the relatively tight, everybody has not understood to seek me to be possible!
