分享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="https://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="https://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);这种方法来传输!!事件匆忙写的比较紧，大家有不懂的找我就可以了！
相关推荐
-
artDialog双击会关闭对话框的修改过程分享
artDialog,一个jquery的对话框插件,很好用的说 但是在使用时发现鼠标双击时会自半对话框,查看源码发现有个监听鼠标双击的事件如下图: 简单的方法就是把该行去掉,为了扩展可改成如下图: 这样就可以动态配置是否需要此功能使用方法如下图: 复制代码 代码如下: $.dialog({ title : json.theme, content : json.content, dbclickHide:true, ////默认false,如果为true则双击就会关闭窗口 lock : true,
-
JS中artdialog弹出框控件之提交表单思路详解
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口. 前言: 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐--这一切全是XHTML+CSS原生实现. 完善的接口 它的接口完善,可以轻易与外部程序配合使用.如异步写入消息.控制位置.尺寸.显示与隐藏.关闭等. 细致的体验 如果不是在输入状态,它支持Esc快捷键关
-
plupload+artdialog实现多平台上传文件
在没介绍正文之前先给大家介绍下plupload知识 plupload简介 Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件.Plupload 目前分为一个核心API 和一个jQuery上传队列部件,这样使你可以直接使用或是自己定制. plupload特性 Plupload使用jQuery的组件做为选择文件和上传文件的队列组件. Plupload使用Flash,Silverlight,HTML5,Gears,BrowserPlus.Fi
-
jQuery插件artDialog.js使用与关闭方法示例
本文实例讲述了jQuery插件artDialog.js使用与关闭方法.分享给大家供大家参考,具体如下: 子窗口关闭artdialog终极解决方案: window.parent.window.art.dialog({ id: 'qin123' }).close(); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t
-
artdialog的图片/标题以及关闭按钮不显示的解决方法
因其它css样式文件中包含"div{ overflow:hidden; }"引起的artdialog的图片,标题,以及关闭按钮不显示的问题: 如下图: 解决办法:在artdialog的样式文件顶部添加一行:div{ overflow:visible; } 最终效果:
-
jQuery validate+artdialog+jquery form实现弹出表单思路详解
功能描述: 在页面弹出一个form表单,ajax无刷新提交表单,表单需通过验证. 适用范围: 适用于在列表页面新增,修改记录. 需要加载的js文件: jquery.min.js artDialog.js iframeTools.js jquery.form.js jquery.validate.js 实现思路: 在页面中将表单放到一个隐藏的容器中,用artdialog弹出该form并对form加上jqueryvalidate验证,提交采用jqueryform ajax提交,由于都是用现成的插件写
-
给artDialog 5.02 增加ajax get功能详细介绍
之前用过artDialog 5.0之前版本,非常佩服作者的创意和敬业精神,现在新版的功能朝着轻量级js的方便发展,我还是比较喜欢之前artDialog.open的功能,直接方便.但就是之前版本有点大,我现在只想在artDialog增加一点从ajax get远程内容,我的代码如下: 复制代码 代码如下: $.extend({ _htmlDataArr:new Array(), _findHTML:function(url){ var hd_len= $._htmlDataArr.length; f
-
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
artDialog是一个轻巧且高度兼容的javascript对话框组件,可让你的网页交互拥有桌面软件般的用户体验. artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐--这一切全是XHTML+CSS原生实现. 为了方便使用,特别制作出artDialog Dreamweaver代码提示的插件. 代码提示效果如下: 使用方法: 把artDialog.xml文件复制到 如:A
-
使用jQuery插件创建常规模态窗口登陆效果
隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素.社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表单.在博客和杂志网站也适用于与主网站分开的作者登陆页面,模态窗口比在JavaScript中创建新窗口更容易,因为使用HTML标记显示,所有 的东西能都呈现在同一个窗口中. 我将演示如何利用jQuery插件leanModal建立一个常规模态窗口.如果你有MIT general license,那么这个插件是完全开源和免费的,我很喜欢这个插件,用起来相当
-
artDialog+plupload实现多文件上传
Plupload简介 Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件.Plupload 目前分为一个核心API 和一个jQuery上传队列部件,这样使你可以直接使用或是自己定制. 一.效果展示 包括文件上传面板以及文件上传列表 二.介绍 长话短说,采用spring springMVC mybatis maven mysql,实现多文件上传功能,下载使用的是流的形式. 其中涉及的分页我会另开一片博客介绍. 三.准备材料 pluploa
-
jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法
本文实例讲述了jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法.分享给大家供大家参考,具体如下: 大家都知道,ArtDialog是一款非常不错的.轻量级的.基于jQuery的对话框插件,深受大家的追捧,大伙可以到一下地址进行下载: https://code.google.com/p/artdialog/ https://github.com/aui/artDialog 截止到2014年9月17日,已经有几个重大的版本v4.1.7.v5.0.4和v6.0.2,其中4.x
-
Jquery弹出窗口插件 LeanModal的使用方法
开发网站少不了要经常用弹出窗口的形式,今天在网上搜了个小插件LeanModal,记录于此,方便自己,亦方便他人使用. 此插件是个老外写的,体积小是它最大的优点,压缩后1k不到.当然,此插件是寄生于JQuery上. 一. 效果图 二.使用步骤: 1.引用Jquery.js和leanModal.min.js 复制代码 代码如下: <script src="Javascript/jquery-1.4.1.min.js" type="text/javascript"&