快捷導(dǎo)航

基于jQuery的Web上傳插件Uploadify使用示例

更新時(shí)間：2016年05月19日 14:56:29 作者：arthinking

Uploadify是一款比較有人氣的頁(yè)面上傳插件,Uploadify使用簡(jiǎn)單而且可定制性較高,接下來(lái)我們就一起來(lái)看下這款基于jQuery的Web上傳插件Uploadify使用示例

Uploadify是一款功能強(qiáng)大，高度可定制的文件上傳插件，實(shí)現(xiàn)的效果非常不錯(cuò)，帶進(jìn)度顯示。在最簡(jiǎn)單的方式下，Uploadify使用很少的代碼就可以運(yùn)行起來(lái)。
Uploadify官方下載地址：http://www.uploadify.com/download/

測(cè)試?yán)?br /> 以下是一個(gè)使用的簡(jiǎn)單例子：
這里我們采用了Uploadify包中自帶的php測(cè)試腳本作為上傳的處理，所以這里安裝了wamp作為php的測(cè)試環(huán)境，在php的網(wǎng)站根目錄中，解壓上面下載好的Uploadify文件，并創(chuàng)建一個(gè)文件上傳保存的目錄，這里我們?cè)赨ploadify的解壓目錄中創(chuàng)建到了uploads作為文件保存目錄。

創(chuàng)建uploadify_test.php文件，添加如下內(nèi)容：

<html>
<head>
  <link href="uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" /> 
  <script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js" ></script> 
  <script type="text/javascript" src="uploadify-v2.1.4/swfobject.js" ></script> 
  <script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" ></script> 

  <style type="text/css">
    #custom-demo .uploadifyQueueItem {
     background-color: #FFFFFF;
     border: none;
     border-bottom: 1px solid #E5E5E5;
     font: 11px Verdana, Geneva, sans-serif;
     height: 50px;
     margin-top: 0;
     padding: 10px;
     width: 350px;
    }
    #custom-demo .uploadifyError {
     background-color: #FDE5DD !important;
     border: none !important;
     border-bottom: 1px solid #FBCBBC !important;
    }
    #custom-demo .uploadifyQueueItem .cancel {
     float: right;
    }
    #custom-demo .uploadifyQueue .completed {
     color: #C5C5C5;
    }
    #custom-demo .uploadifyProgress {
     background-color: #E5E5E5;
     margin-top: 10px;
     width: 100%;
    }
    #custom-demo .uploadifyProgressBar {
     background-color: #0099FF;
     height: 3px;
     width: 1px;
    }
    #custom-demo #custom-queue {
     border: 1px solid #E5E5E5;
     height: 213px;
     margin-bottom: 10px;
     width: 370px;
    }        
  </style>  

  <script type="text/javascript">
    $(function() {
    $('#custom_file_upload').uploadify({
       'uploader'    : 'uploadify-v2.1.4/uploadify.swf',
       'script'     : 'uploadify-v2.1.4/uploadify.php',
       'cancelImg'   : 'uploadify-v2.1.4/cancel.png',
       'folder'     : 'uploadify-v2.1.4/uploads',
       'multi'     : true,
       'auto'      : true,
       'fileExt'    : '*.jpg;*.gif;*.png;*.txt',
       'fileDesc'    : 'Image Files (.JPG, .GIF, .PNG)',
       'queueID'    : 'custom-queue',
       'queueSizeLimit' : 3,
       'simUploadLimit' : 3,
       'sizeLimit'  : 1024000,
       'removeCompleted': false,
       'onSelectOnce'  : function(event,data) {
         $('#status-message').text(data.filesSelected + ' files have been added to the queue.');
        },
       'onAllComplete' : function(event,data) {
         $('#status-message').text(data.filesUploaded + ' files uploaded, ' + data.errors + ' errors.');
        }
      });        
    });
  </script>
</head>
<body>
  <div id="custom-demo" class="demo">

     <h2>Custom Demo</h2>
    <p>Uploadify is fully customizable. Here is an implementation with multiple files, auto uploads, limited file types, limited queue size, and custom onSelectOnce and onAllComplete functions.</p>
    <div class="demo-box">
      <div id="status-message">Select some files to upload:</div>

      <div id="custom-queue"></div>
      <input id="custom_file_upload" type="file" name="Filedata" />    
    </div>
  </div>
</body>
</html>

Uploadify插件提示$(“#id”).uploadify is not a function錯(cuò)誤可能原因
swfobject.js和jquery.uploadify.v2.1.4.min.js由于使用到了jquery的API，所以這兩個(gè)文件需要依賴于jquery-1.4.2.min.js這個(gè)文件。
正常情況下需要引入如下幾個(gè)js文件：

<script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js" ></script> 
<script type="text/javascript" src="uploadify-v2.1.4/swfobject.js" ></script> 
<script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" ></script>

而在項(xiàng)目中已經(jīng)存在了另外一個(gè)jquery的JS文件，導(dǎo)致文件沖突。而另外的一個(gè)jQuery文件的引入位置位于上面三個(gè)js文件引入位置的后面，此時(shí)項(xiàng)目中使用的是原本已經(jīng)存在的jquery的JS文件，導(dǎo)致在加載jquery.uploadify.v2.1.4.min.js文件時(shí)還沒(méi)有可用的jquery相關(guān)函數(shù)的定義，才會(huì)報(bào)這個(gè)錯(cuò)誤。

解決方法：
去掉其中一個(gè)jquery的JS文件，并把swfobject.js和jquery.uploadify.v2.1.4.min.js文件放到引入jquery的JS文件的位置的后面即可。

您可能感興趣的文章: