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


Posted in Javascript onDecember 26, 2014

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

这些是我们项目中必不可少的东西,所以今天推荐两个一个叫做artdialog是个iframe的jquery插件,一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程,今天我就简单的介绍和写一点使用的方法!
简单用代码举例子
最小化的方法

data-url是上传后执行上传文件的php方法

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

        done: function (e, data) { //上传结束后执行

            $.each(data.result.files, function (index, file) {

                $('<p/>').text(file.name).appendTo(document.body);

            });

        }

    });

});

</script>

稍微扩展一下

<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(){

  //完整的API在这里https://github.com/blueimp/jQuery-File-Upload/wiki/API 我就是简单的介绍一些常用的说明

  $("#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关闭如何传输数据呢?

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

<script>

function nihao(){

 art.dialog.open(  //打开一个iframe远程文件

  "http://localhost/dialog/index2.html",

  {

   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的框架怎么做,下边代码

 <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);这种方法来传输!!事件匆忙写的比较紧,大家有不懂的找我就可以了!

Javascript 相关文章推荐
JavaScript中Math对象使用说明
Jan 16 Javascript
基于jquery的loading效果实现代码
Nov 05 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 #Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 #Javascript
jQuery中ajax的load()方法用法实例
Dec 26 #Javascript
jquery中checkbox全选失效的解决方法
Dec 26 #Javascript
jQuery中change事件用法实例
Dec 26 #Javascript
jQuery中mouseover事件用法实例
Dec 26 #Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 #Javascript
You might like
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
js实现抽奖效果
2017/03/27 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
js实现小时钟效果
2020/03/25 Javascript
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
详解Python3的TFTP文件传输
2018/06/26 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
促销活动策划方案
2014/01/12 职场文书
师德建设实施方案
2014/03/21 职场文书
综治宣传月活动总结
2014/04/28 职场文书
庆国庆活动总结
2014/08/28 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
简历自荐信范文
2015/03/09 职场文书
音乐之声观后感
2015/06/04 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
大学同学聚会感言
2015/07/30 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL