分享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学习笔记之获取当前目录的实现代码
Dec 14 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
React组件对子组件children进行加强的方法
Jun 23 Javascript
基于javascript处理nginx请求过程详解
Jul 07 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
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
新手简单了解vue
2019/05/29 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
Python判断Abundant Number的方法
2015/06/15 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python对html过滤处理的方法
2018/10/21 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
25道Java面试题集合
2013/05/21 面试题
大学四年职业生涯规划书范文
2014/01/02 职场文书
学生检讨书如何写
2014/10/30 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
2019个人半年工作总结
2019/06/21 职场文书
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
Python OpenCV超详细讲解基本功能
2022/04/02 Python