分享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="/UploadFiles/2021-04-02/jquery.min.js">
<script src="js/vendor/jquery.ui.widget.js">
<script src="/UploadFiles/2021-04-02/jquery.iframe-transport.js">
<script src="js/jquery.fileupload.js">
<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="/UploadFiles/2021-04-02/jquery.min.js">
<script src="js/vendor/jquery.ui.widget.js">
<script src="/UploadFiles/2021-04-02/jquery.iframe-transport.js">
<script src="js/jquery.fileupload.js">
<script>
$(function(){
//完整的API在这里https://github.com/blueimp/jQuery-File-Upload/wiki/API 我就是简单的介绍一些常用的说明
$("#fileupload").fileupload('option',{ //设置上传事件
url: 'http://localhost/php/index.php' //指定php上传方法
disableImageResize: /Android("codetitle">复制代码 代码如下:
<script src="/UploadFiles/2021-04-02/jquery.mini.js">
<script src="artDialog.js">
<script src="./plugins/iframeTools.js">
<script src="/UploadFiles/2021-04-02/idialog.css">
<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="/UploadFiles/2021-04-02/jquery.mini.js">
<script src="artDialog.js">
<script src="./plugins/iframeTools.js">
<script src="/UploadFiles/2021-04-02/idialog.css">
<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);这种方法来传输!!事件匆忙写的比较紧，大家有不懂的找我就可以了！
下一篇：使用Plupload实现直接上传附件至七牛云存储