jquery.uploadify php,jquery组件Uploadify的使用
在百通微博項(xiàng)目的開發(fā)過程中曾遇到了這樣一個(gè)難題，一個(gè)發(fā)圖片微博的功能，需要做到上傳并預(yù)覽圖片，但傳統(tǒng)的上傳功能是運(yùn)用的簡單的file控件，如果要將圖片上傳到服務(wù)器的話還需另外添加上傳功能，而且后面的預(yù)覽功能仍需要另外寫js去實(shí)現(xiàn)，整個(gè)過程比較繁瑣，而且做出來的效果也并不美觀，所以我拋棄了傳統(tǒng)做法，并在網(wǎng)上搜索新的功能組件，于是，便找到了就jquery的uploadify組件。
jquery大家都知道，是一個(gè)輕量級(jí)而且很優(yōu)秀的Javascrīpt框架，兼容性相當(dāng)好，是開發(fā)人員必備之物，而由它開發(fā)的uploadify組件，在網(wǎng)上的評(píng)論也是很不錯(cuò)的，他的優(yōu)勢(shì)有很多：支持單文件或多文件上傳，可控制并發(fā)上傳的文件數(shù) ；在服務(wù)器端支持各種語言與之配合使用，諸如PHP,.NET,Java……；通過參數(shù)可配置上傳文件類型及大小限制；通過參數(shù)可配置是否選擇文件后自動(dòng)上傳；易于擴(kuò)展，可控制每一步驟的回調(diào)函數(shù)(onSelect, onCancel……)；通過接口參數(shù)和CSS控制外觀等等。
下面介紹一下uploadify組件的具體使用：
uploadify組件的內(nèi)容其實(shí)不復(fù)雜，下載解壓下來后，發(fā)現(xiàn)他有一大堆的文件，其實(shí)主要我們用到的只有那么幾個(gè)：以看到里面的幾個(gè)主要文件：jquery.uploadify.js(完成上傳功能的腳本文件，在調(diào)用頁面引用)、uploadify.css(外觀樣式表)、uploader.swf(上傳控件的主體文件，flash控件)、upload.php(服務(wù)器端處理文件)。他的主要文件方法文件就是jquery.uploadify.js了。
uploadify的參數(shù)比較多，主要包括：
uploader ： uploadify.swf 文件的相對(duì)路徑，該swf文件是一個(gè)帶有文字BROWSE的按鈕，點(diǎn)擊后淡出打開文件對(duì)話框，默認(rèn)值： uploadify.swf。
script ：?? 后臺(tái)處理程序的相對(duì)路徑 。默認(rèn)值：uploadify.php
checkScript ：用來判斷上傳選擇的文件在服務(wù)器是否存在的后臺(tái)處理程序的相對(duì)路徑
fileDataName ：設(shè)置一個(gè)名字，在服務(wù)器處理程序中根據(jù)該名字來取上傳文件的數(shù)據(jù)。默認(rèn)為Filedata
method ： 提交方式Post 或Get 默認(rèn)為Post
scriptAccess ：flash腳本文件的訪問模式，如果在本地測(cè)試設(shè)置為always，默認(rèn)值：sameDomain
folder ：? 上傳文件存放的目錄 。
queueID ： 文件隊(duì)列的ID，該ID與存放文件隊(duì)列的div的ID一致。
queueSizeLimit ： 當(dāng)允許多文件生成時(shí)，設(shè)置選擇文件的個(gè)數(shù)，默認(rèn)值：999 。
multi ： 設(shè)置為true時(shí)可以上傳多個(gè)文件。
auto ： 設(shè)置為true當(dāng)選擇文件后就直接上傳了，為false需要點(diǎn)擊上傳按鈕才上傳 。
fileDesc ： 這個(gè)屬性值必須設(shè)置fileExt屬性后才有效。?? sizeLimit ： 上傳文件的大小限制 。
simUploadLimit ： 允許同時(shí)上傳的個(gè)數(shù) 默認(rèn)值：1 。
buttonText ： 瀏覽按鈕的文本，默認(rèn)值：BROWSE 。
buttonImg ： 瀏覽按鈕的圖片的路徑 。
hideButton ： 設(shè)置為true則隱藏瀏覽按鈕的圖片 。
rollover ： 值為true和false，設(shè)置為true時(shí)當(dāng)鼠標(biāo)移到瀏覽按鈕上時(shí)有反轉(zhuǎn)效果。
width ： 設(shè)置瀏覽按鈕的寬度 ，默認(rèn)值：110。
height ： 設(shè)置瀏覽按鈕的高度 ，默認(rèn)值：30。
wmode ： 設(shè)置該項(xiàng)為transparent 可以使瀏覽按鈕的flash背景文件透明，并且flash文件會(huì)被置為頁面的最高層。 默認(rèn)值：opaque 。
cancelImg ：選擇文件到文件隊(duì)列中后的每一個(gè)文件上的關(guān)閉按鈕圖標(biāo)。
fileExt ： 設(shè)置可以選擇的文件的類型，格式如：’*.doc;*.pdf;*.rar’ 。
運(yùn)用時(shí)，我們引入**.uploadify.min.js及uploadify.css文件，?前提是我們需要引入jquery文在先
然后即可在js中插入相應(yīng)的js代碼了：
$(document).ready(function()
{
$(“#uploadify”).uploadify({
‘uploader’: ‘JS/jquery.uploadify-v2.1.0/uploadify.swf’,
‘script’: ‘UploadHandler.ashx’,
‘cancelImg’: ‘JS/jquery.uploadify-v2.1.0/cancel.png’,
‘folder’: ‘UploadFile’,
‘queueID’: ‘fileQueue’,
‘a(chǎn)uto’: false,
‘multi’: true,
‘onInit’:function(){alert(“1”);},
‘onSelect’: function(e, queueId, fileObj){
alert(“唯一標(biāo)識(shí):” + queueId + “rn” );
}
});
});
需要注意的是，uploadify方法一定要加載在初始化方法中，否則無效果，具體的參數(shù)設(shè)定就由你當(dāng)前的功能決定了。到這一步，一個(gè)js上傳與帶進(jìn)度條預(yù)覽的效果便完成了，用uploadify組件即減少了代碼輸出量，也使頁面效果更美觀。
總結(jié)
以上是生活随笔為你收集整理的jquery.uploadify php,jquery组件Uploadify的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： GreenSock Animation
- 下一篇： 前端页面劫持和反劫持