uploadify使用詳解

提到上傳，就會想到file標(biāo)簽。但是如果文件過大，或者多個文件的時候，這個html標(biāo)簽就有點力不從心了，下面主要討論php后臺來處理多線程上傳工具。正因為用自帶的那個標(biāo)簽解決不了，所以就有了今天的這個Uploadify這個插件的誕生。

uploadfiy這個插件是基于js里面的jquery庫寫的。結(jié)合了ajax和flash，實現(xiàn)了這個多線程上傳的功能。

現(xiàn)在最新版為3.2,下載地址為：http://www.uploadify.com/wp-content/uploads/files/uploadify.zip。璞玉使用的是2.9的版本，新版本不一定是最好的，最適合自己的才是最好的。下面來介紹一下uploadfiy的使用方法。

第一步：下載好壓縮包之后，解壓里面的文件：

jquery.uploadify.js ? ? ?(主要插件)

jquery-1.7.2.min.js ? ? ?(jquery主件)

uploadify.swf ? ? ? ? ? ? ?(flash上傳插件)

uploadify.css ? ? ? ? ? ? ? ?(上傳樣式表)

uploadify-cancel.png ? ?(flash上傳按鈕圖標(biāo))

uploadify.php ? ? ? ? ? ? ?(上傳處理數(shù)據(jù))

uploads文件夾 ? ? ? ? ? ? (默認(rèn)保存上傳文件目錄)

第二步：寫上傳接口

在你需要上傳的頁面寫下如下js：

首先引入js/css

然后定義一些初始化變量，后面都寫有注釋

$(document).ready(function() {

$("#fileInput2").uploadify({

'uploader': 'js/uploadify.swf',//所需要的flash文件

'cancelImg': 'cancel.png',//單個取消上傳的圖片

'script': 'js/uploadify.php',//實現(xiàn)上傳的程序

'folder': 'uploads',//服務(wù)端的上傳目錄

//'auto': true,//自動上傳

'multi': true,//是否多文件上傳

//'checkScript': 'js/check.php',//驗證 ，服務(wù)端的

'displayData': 'speed',//進(jìn)度條的顯示方式

//'fileDesc': 'Image(*.jpg;*.gif;*.png)',//對話框的文件類型描述

'fileExt': '*.jpg;*.jpeg;*.gif;*.png',//可上傳的文件類型

//'sizeLimit': 999999 ,//限制上傳文件的大小

'simUploadLimit' :3, //并發(fā)上傳數(shù)據(jù)

'queueSizeLimit' :20, //可上傳的文件個數(shù)

'buttonText' :'文件上傳',//通過文字替換鈕扣上的文字

'buttonImg': 'css/images/browseBtn.png',//替換上傳鈕扣

'width': 80,//buttonImg的大小

'height': 24,//

'rollover': true,//button是否變換

onComplete: function (evt, queueID, fileObj, response, data) {

//alert("Successfully uploaded: "+fileObj.filePath);

//alert(response);

getResult(response);//獲得上傳的文件路徑

}

//onError: function(errorObj) {

//???? alert(errorObj.info+"?????????????? "+errorObj.type);

//}

});

});

下面這個是ajax 接受后臺數(shù)據(jù)處理返回來的值，然后追加到前臺上傳頁面顯示上傳的文件名和地址

function getResult(content){

//通過上傳的圖片來動態(tài)生成text來保存路徑

var board = document.getElementById("divTxt");

board.style.display="";

var newInput = document.createElement("input");

newInput.type = "text";

newInput.size = "45";

newInput.name="myFilePath[]";

var obj = board.appendChild(newInput);

var br= document.createElement("br");

board.appendChild(br);

obj.value=content;

}

最后是在body里面添加調(diào)用標(biāo)簽

多文件上傳

||??清除上傳列表

已經(jīng)上傳的圖片有：

第三步：定義uploadify處理后臺，?默認(rèn)的是uploadify.php頁面

璞玉這里就簡單的寫下獲取文件名稱的例子

if (!empty($_FILES)) {

echo $_FILES['Filedata']['name'];

}

具體說怎么處理這里的文件，是復(fù)制到哪兒還是怎么處理，看各位的需求了。直接在這個后臺寫就行了

第四步：打開頁面然后去上傳一個試試

uploadify上傳

uploadify選擇上傳

uploadify上傳完成

是不是就完成了呢？

總結(jié)

以上是生活随笔為你收集整理的uploadify php 重命名,uploadify与php使用详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。