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);这种方法来传输!!事件匆忙写的比较紧,大家有不懂的找我就可以了!我也准备写一点微信的,继续微信就是深入点的了,譬如如何用thinkphp或者Ci框架来扩展微信做到别人可以接入我的功能--

点赞(0) 打赏

Comment list 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部