分享2個(gè)jQuery插件--jquery.fileupload與artdialog

更新時(shí)間：2014年12月26日 15:18:54 投稿：hebedich

這篇文章主要介紹了分享2個(gè)jQuery插件--jquery.fileupload與artdialog的使用方法及示例，非常的實(shí)用，這里推薦給大家。

這些是我們項(xiàng)目中必不可少的東西，所以今天推薦兩個(gè)一個(gè)叫做artdialog是個(gè)iframe的jquery插件，一個(gè)叫jquery file upload,我看網(wǎng)上很少有這個(gè)插件jquery file upload的插件使用教程，今天我就簡單的介紹和寫一點(diǎn)使用的方法！
簡單用代碼舉例子
最小化的方法

復(fù)制代碼代碼如下:

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>

稍微擴(kuò)展一下

復(fù)制代碼代碼如下:

<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 我就是簡單的介紹一些常用的說明
  $("#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è)插件功能很強(qiáng)大，方法和API太多大家可以先看看官網(wǎng)的APi，當(dāng)然有不懂的也可以問問我！

第二個(gè)這個(gè)其實(shí)很簡單artdialog,國人開發(fā)的，所有的API都是漢語的，所以同學(xué)們一看就會(huì)了，這里我就說一個(gè)的了，就是iframe關(guān)閉如何傳輸數(shù)據(jù)呢？

復(fù)制代碼代碼如下:

我要把index2.html數(shù)據(jù)傳輸回去，當(dāng)然我的index2打算點(diǎn)擊X的時(shí)候就已經(jīng)把數(shù)據(jù)傳輸回父iframe的框架怎么做，下邊代碼

復(fù)制代碼代碼如下:

 <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>

當(dāng)然數(shù)據(jù)不是點(diǎn)擊X按鈕的傳輸可以用自帶的art.dialog.data(‘test', val);這種方法來傳輸!!事件匆忙寫的比較緊，大家有不懂的找我就可以了！

您可能感興趣的文章: