分享2個jQuery外掛程式--jquery.fileupload與artdialog_jquery

這些是我們專案中必不可少的東西，所以今天推薦兩個一個叫做artdialog是個iframe的jquery插件，一個叫jquery file upload,我看網上很少有這個插件jquery file upload的插件使用教程，今天我就簡單的介紹和寫一點使用的方法！
簡單用程式碼舉例
最小化的方法

複製程式碼 程式碼如下:

data-url是上傳後執行上傳檔案的php方法





<script><br /> $(function () {<br />     $('#fileupload').fileupload({<br />         dataType: 'json',  //josn傳輸<br />         done: function (e, data) { //上傳結束後執行<br />             $.each(data.result.files, function (index, file) {<br />                 $('<p/>').text(file.name).appendTo(document.body);<br />             });<br />         }<br />     });<br /> });<br /> </script>

稍微擴充一下

複製程式碼 程式碼如下:

 
 
 
 
 <script><br />  $(function(){<br />   //完整的API在這裡<a href="https://github.com/blueimp/jQuery-File-Upload/wiki/API">https://github.com/blueimp/jQuery-File-Upload/wiki/API 我就是簡單的介紹一些常用的說明<br />   $("#fileupload").fileupload('option',{        //設定上傳事件<br />    url: 'http://localhost/php/index.php'     //指定php上傳方法<br />    disableImageResize: /Android(?!.*Chrome)|Opera/<br />                 .test(window.navigator.userAgent),     //禁止產生縮圖<br />             maxFileSize : 5000000         //設定支援的最大尺寸<br />             acceptFileTypes: /(.|/)(rar|zip|jp?g|png|bmp)$/i, //設定上傳的類型<br />   });<br />   $.ajax({<br />             url: $('#fileupload').fileupload('option', 'url'), //依照設定選項ajax傳送<br />             dataType: 'json',<br />             context: $('#fileupload')[0]<br />         }).done(function (result) {<br />            $(this).fileupload('option','done'<br />             ).call(this, $.Event('done'), {result: result});   //上傳完成後所做的事<br />             <br />         });<br />         $('#fileupload').bind('fileuploaddone',function(e,data){  //綁定上傳完執行的事件<br />         $.each(data.result.files , function (index ,file){<br />             for(var i in file){<br />                 alert(i ':' file[i])<br />             }<br />         });<br />         //綁定的事件太多了 大家直接翻譯過來就懂是什麼意思<br />         $('#fileupload')<br />       .bind('fileuploadadd', function (e, data) {/* ... */})<br />       .bind('fileuploadsubmit', function (e, data) {/* ... */})<br />       .bind('fileuploadsend', function (e, data) {/* ... */})<br />       .bind('fileuploaddone', function (e, data) {/* ... */})<br />       .bind('fileuploadfail', function (e, data) {/* ... */})<br />       .bind('fileuploadalways', function (e, data) {/* ... */})<br />       .bind('fileuploadprogress', function (e, data) {/* ... */})<br />       .bind('fileuploadprogressall', function (e, data) {/* ... */})<br />       .bind('fileuploadstart', function (e) {/* ... */})<br />       .bind('fileuploadstop', function (e) {/* ... */})<br />       .bind('fileuploadchange', function (e, data) {/* ... */})<br />       .bind('fileuploadpaste', function (e, data) {/* ... */})<br />       .bind('fileuploaddrop', function (e, data) {/* ... */})<br />       .bind('fileuploaddragover', function (e) {/* ... */})<br />       .bind('fileuploadchunksend', function (e, data) {/* ... */})<br />       .bind('fileuploadchunkdone', function (e, data) {/* ... */})<br />       .bind('fileuploadchunkfail', function (e, data) {/* ... */})<br />       .bind('fileuploadchunkalways', function (e, data) {/* ... */});<br />    });<br />  });<br /> </script>

由於這個外掛功能很強大，方法和API太多大家可以先看看官網的APi，當然有不懂的也可以問我！

第二個這個其實很簡單artdialog,國人開發的，所有的API都是漢語的，所以同學們一看就會了，這裡我就說一個的了，就是iframe關閉如何傳輸數據呢？

複製程式碼 程式碼如下:

  
 
 
 
 

<script><br /> function nihao(){<br />  art.dialog.open(  //開啟一個iframe遠端檔案<br />   "<a href="http://localhost/dialog/index2.html">http://localhost/dialog/index2.html",<br />   {<br />    title :"測試的頁面",<br />    width: 320, <br />    height: 400,<br />    close : function(){<br />     //iframe關閉時執行的<br />     alert("my god 關閉了")<br />    }<br />   }<br /> );<br /> }<br /> </script>


提交

我要把index2.html資料傳回去，當然我的index2打算點擊X的時候就已經把資料傳回父iframe的框架怎麼做，下邊程式碼

複製程式碼 程式碼如下:

  
 
 
 
 



<script><br />  var origin = artDialog.open.origin;<br />  var v = origin.document.getElementById('nihao');<br />  v.value = document.getElementById('chushu').value;<br /> </script>

當然資料不是點擊X按鈕的傳輸可以用自帶的art.dialog.data('test', val);這種方法來傳輸!!事件匆忙寫的比較緊，大家有不懂的找我就可以了！