Uploadify是一款比較有人氣的頁面上傳插件,Uploadify使用簡單而且可定制性較高,接下來我們就一起來看下這款基于jQuery的Web上傳插件Uploadify使用示例
Uploadify是一款功能強大，高度可定制的文件上傳插件，實現(xiàn)的效果非常不錯，帶進度顯示。在最簡單的方式下，Uploadify使用很少的代碼就可以運行起來。
Uploadify官方下載地址：http://www.uploadify.com/download/
測試例子
以下是一個使用的簡單例子：
這里我們采用了Uploadify包中自帶的php測試腳本作為上傳的處理，所以這里安裝了wamp作為php的測試環(huán)境，在php的網(wǎng)站根目錄中，解壓上面下載好的Uploadify文件，并創(chuàng)建一個文件上傳保存的目錄，這里我們在Uploadify的解壓目錄中創(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">
<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>
<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錯誤可能原因
swfobject.js和jquery.uploadify.v2.1.4.min.js由于使用到了jquery的API，所以這兩個文件需要依賴于jquery-1.4.2.min.js這個文件。
正常情況下需要引入如下幾個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>
而在項目中已經(jīng)存在了另外一個jquery的JS文件，導致文件沖突。而另外的一個jQuery文件的引入位置位于上面三個js文件引入位置的后面，此時項目中使用的是原本已經(jīng)存在的jquery的JS文件，導致在加載jquery.uploadify.v2.1.4.min.js文件時還沒有可用的jquery相關函數(shù)的定義，才會報這個錯誤。
解決方法：
去掉其中一個jquery的JS文件，并把swfobject.js和jquery.uploadify.v2.1.4.min.js文件放到引入jquery的JS文件的位置的后面即可。