這些是我們項(xiàng)目中必不可少的東西，所以今天推薦兩個(gè)一個(gè)叫做artdialog是個(gè)iframe的jquery插件，一個(gè)叫jquery file upload,我看網(wǎng)上很少有這個(gè)插件jquery file upload的插件使用教程，今天我就簡(jiǎn)單的介紹和寫一點(diǎn)使用的方法！
簡(jiǎn)單用代碼舉例子
最小化的方法
data-url是上傳后執(zhí)行上傳文件的php方法
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="http://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) { //上傳結(jié)束后執(zhí)行
$.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="http://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 我就是簡(jiǎn)單的介紹一些常用的說明
$("#fileupload").fileupload('option',{ //設(shè)置上傳事件
url: 'http://localhost/php/index.php' //指定php上傳方法
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent), //禁止生成縮略圖
maxFileSize : 5000000 //設(shè)置支持的最大尺寸
acceptFileTypes: /(/.|//)(rar|zip|jp?g|png|bmp)$/i, //設(shè)置上傳的類型
});
$.ajax({
url: $('#fileupload').fileupload('option', 'url'), //根據(jù)設(shè)置選項(xiàng)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){ //綁定上傳完執(zhí)行的事件
$.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>
第二個(gè)這個(gè)其實(shí)很簡(jiǎn)單artdialog,國人開發(fā)的，所有的API都是漢語的，所以同學(xué)們一看就會(huì)了，這里我就說一個(gè)的了，就是iframe關(guān)閉如何傳輸數(shù)據(jù)呢？
<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( //打開一個(gè)iframe遠(yuǎn)程文件
"
http://localhost/dialog/index2.html",
{
title :"測(cè)試的頁面",
width: 320,
height: 400,
close : function(){
//iframe關(guān)閉時(shí)執(zhí)行的
alert("my god 關(guān)閉了")
}
}
);
}
</script>
<body>
<input type="text" id="nihao" value="測(cè)試數(shù)據(jù)"/>
<a href="javascript::nihao()" onclick="nihao()">提交</a>
我要把index2.html數(shù)據(jù)傳輸回去，當(dāng)然我的index2打算點(diǎn)擊X的時(shí)候就已經(jīng)把數(shù)據(jù)傳輸回父iframe的框架怎么做，下邊代碼
當(dāng)然數(shù)據(jù)不是點(diǎn)擊X按鈕的傳輸可以用自帶的art.dialog.data(‘test', val);這種方法來傳輸!!事件匆忙寫的比較緊，大家有不懂的找我就可以了！
