当前位置：首页 > 资讯 > 技术文档

分享2个jQuery插件--jquery.fileupload与artdialog

时间：2020-12-20 05:47 编辑：来源：阅读：
扫一扫，手机访问

摘要：分享2个jQuery插件--jquery.fileupload与artdialog

[img]http://files.jb51.net/file_images/article/201412/2014122615161311.png[/img] 这些是我们项目中必不可少的东西，所以今天推荐两个一个叫做artdialog是个iframe的jquery插件，一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程，今天我就简单的介绍和写一点使用的方法！简单用代码举例子最小化的方法

[url=https://github.com/blueimp/jQuery-File-Upload/wiki/API]https://github.com/blueimp/jQuery-File-Upload/wiki/API[/url] 我就是简单的介绍一些常用的说明 $("#fileupload").fileupload('option',{ //设置上传事件 url: 'http://localhost/php/index.php' //指定php上传方法 disableImageResize: /Android(?!.*Chrome)|Opera/ .test(window.navigator.userAgent), //禁止生成缩略图 maxFileSize : 5000000 //设置支持的最大尺寸 acceptFileTypes: /(\.|\/)(rar|zip|jp?g|png|bmp)$/i, //设置上传的类型 }); $.ajax({ url: $('#fileupload').fileupload('option', 'url'), //根据设置选项ajax传输 dataType: 'json', context: $('#fileupload')[0] }).done(function (result) { $(this).fileupload('option','done' ).call(this, $.Event('done'), {result: result}); //上传完成后做的事情 }); $('#fileupload').bind('fileuploaddone',function(e,data){ //绑定上传完执行的事件 $.each(data.result.files , function (index ,file){ for(var i in file){ alert(i+':'+file[i]) } }); //绑定的事件太多了大家直接翻译过来就明白是什么意思 $('#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>

由于这个插件功能很强大，方法和API太多大家可以先看看官网的APi，当然有不懂的也可以问问我！第二个这个其实很简单artdialog,国人开发的，所有的API都是汉语的，所以同学们一看就会了，这里我就说一个的了，就是iframe关闭如何传输数据呢？

[url=http://localhost/dialog/index2.html]http://localhost/dialog/index2.html[/url]", { title :"测试的页面", width: 320, height: 400, close : function(){ //iframe关闭时执行的 alert("my god 关闭了") } } ); } </script> <body> <input type="text" id="nihao" value="测试数据"/> <a href="javascript::nihao()" onclick="nihao()">提交</a>

我要把index2.html数据传输回去，当然我的index2打算点击X的时候就已经把数据传输回父iframe的框架怎么做，下边代码

[u]复制代码[/u] 代码如下:

 <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>

 <title>jquery的处理</title>

</head>

<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>

当然数据不是点击X按钮的传输可以用自带的art.dialog.data(‘test', val);这种方法来传输!!事件匆忙写的比较紧，大家有不懂的找我就可以了！

全部评论(0)

上一篇：jQuery中需要注意的细节问题小结
下一篇：jQuery获得包含margin的outerWidth和outerHeight的方法

资讯排行榜
更多>>