分享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 相关文章推荐
没有document.getElementByName方法
Aug 19 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
使用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开发GUI
2006/10/09 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python selenium的基本使用方法分析
2019/12/21 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Python 中如何写注释
2020/08/28 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
优秀教师工作感言
2014/02/16 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
感恩父母主题班会
2015/08/12 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL