網頁制作poluoluo文章簡介:最近看到一款基於jquery的上傳插件Uploadify無論在功能、外觀、可用性和擴展性上都有不錯表現,於是研究了一番,介紹給大家。
無論是做Web產品還是Web項目,文件上傳是經常要用到的功能。以前經常聽到做項目的同事抱怨:“這款文件上傳控件功能強大但是用起來麻煩,最簡單的input上傳使用方便但是功能太簡單(例如不支持多文件),外觀也不盡如人意”。之後我一直留意網上的上傳控件,最近看到一款基於jquery的上傳插件Uploadify無論在功能、外觀、可用性和擴展性上都有不錯表現,於是研究了一番,介紹給大家。
簡介
Uploadify簡單說來,是基於Jquery的一款文件上傳插件。它的功能特色總結如下:
相關鏈接
Uploadify主頁地址:http://www.uploadify.com/ 在該頁面你可以了解到關於他的更多內容。
Uploadify在線演示:在線Demo
Uploadify配置參數及接口文檔:http://www.uploadify.com/documentation
Uploadify插件下載地址:http://www.uploadify.com/download
使用方法
//聲明一個普通的html文件上傳控件,並指定id <input type="file" name="fileInput" id="fileInput" />
//將聲明的普通上傳控件與Uploadify插件綁定 <script type="text/javascript"> $(document).ready(function() { $('#fileInput').fileUpload ({ //以下參數均是可選 'uploader' : 'uploader.swf', //指定上傳控件的主體文件,默認‘uploader.swf’ 'script' : 'upload.php', //指定服務器端上傳處理文件,默認‘upload.php’ 'cancelImg' : 'cancel.png', //指定取消上傳的圖片,默認‘cancel.png’ 'auto' : true, //選定文件後是否自動上傳,默認false 'folder' : '/uploads' //要上傳到的服務器路徑,默認‘/’ 'muti' : true, //是否允許同時上傳多文件,默認false 'fileDesc' : 'rar文件或zip文件' //出現在上傳對話框中的文件類型描述 'fileExt' : '*.rar;*.zip', //控制可上傳文件的擴展名,啟用本項時需同時聲明fileDesc 'sizeLimit': 86400 //控制上傳文件的大小,單位byte 'simUploadLimit' :5 //多文件上傳時,同時上傳文件數目限制 }); }); </script> 上面列出了我認為常用的配置選項,此外還有很多參數可配置,參考官方文檔
<a href="javascript:$('#fileInput').fileUploadStart();">上傳文件</a>
聲明取消多文件上傳時上傳隊列:
<a href="javascript:$('#fileInput').fileUploadClearQueue();">取消上傳隊列</a>