這些是我們項目中必不可少的東西，所以今天推薦兩個一個叫做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);這種方法來傳輸!!事件匆忙寫的比較緊，大家有不懂的找我就可以了！