在百通微博項目的開發過程中曾遇到了這樣一個難題，一個發圖片微博的功能，需要做到上傳并預覽圖片，但傳統的上傳功能是運用的簡單的file控件，如果要將圖片上傳到服務器的話還需另外添加上傳功能，而且后面的預覽功能仍需要另外寫js去實現，整個過程比較繁瑣，而且做出來的效果也并不美觀，所以我拋棄了傳統做法，并在網上搜索新的功能組件，于是，便找到了就jquery的uploadify組件。

jquery大家都知道，是一個輕量級而且很優秀的Javascrīpt框架，兼容性相當好，是開發人員必備之物，而由它開發的uploadify組件，在網上的評論也是很不錯的，他的優勢有很多：支持單文件或多文件上傳，可控制并發上傳的文件數 ；在服務器端支持各種語言與之配合使用，諸如PHP,.NET,Java……；通過參數可配置上傳文件類型及大小限制；通過參數可配置是否選擇文件后自動上傳；易于擴展，可控制每一步驟的回調函數(onSelect, onCancel……)；通過接口參數和CSS控制外觀等等。

下面介紹一下uploadify組件的具體使用：

uploadify組件的內容其實不復雜，下載解壓下來后，發現他有一大堆的文件，其實主要我們用到的只有那么幾個：以看到里面的幾個主要文件：jquery.uploadify.js(完成上傳功能的腳本文件，在調用頁面引用)、uploadify.css(外觀樣式表)、uploader.swf(上傳控件的主體文件，flash控件)、upload.php(服務器端處理文件)。他的主要文件方法文件就是jquery.uploadify.js了。

uploadify的參數比較多，主要包括：

uploader ： uploadify.swf 文件的相對路徑，該swf文件是一個帶有文字BROWSE的按鈕，點擊后淡出打開文件對話框，默認值： uploadify.swf。

script ：?? 后臺處理程序的相對路徑 。默認值：uploadify.php

checkScript ：用來判斷上傳選擇的文件在服務器是否存在的后臺處理程序的相對路徑

fileDataName ：設置一個名字，在服務器處理程序中根據該名字來取上傳文件的數據。默認為Filedata

method ： 提交方式Post 或Get 默認為Post

scriptAccess ：flash腳本文件的訪問模式，如果在本地測試設置為always，默認值：sameDomain

folder ：? 上傳文件存放的目錄 。

queueID ： 文件隊列的ID，該ID與存放文件隊列的div的ID一致。

queueSizeLimit ： 當允許多文件生成時，設置選擇文件的個數，默認值：999 。

multi ： 設置為true時可以上傳多個文件。

auto ： 設置為true當選擇文件后就直接上傳了，為false需要點擊上傳按鈕才上傳 。

fileDesc ： 這個屬性值必須設置fileExt屬性后才有效。?? sizeLimit ： 上傳文件的大小限制 。

simUploadLimit ： 允許同時上傳的個數 默認值：1 。

buttonText ： 瀏覽按鈕的文本，默認值：BROWSE 。

buttonImg ： 瀏覽按鈕的圖片的路徑 。

hideButton ： 設置為true則隱藏瀏覽按鈕的圖片 。

rollover ： 值為true和false，設置為true時當鼠標移到瀏覽按鈕上時有反轉效果。

width ： 設置瀏覽按鈕的寬度 ，默認值：110。

height ： 設置瀏覽按鈕的高度 ，默認值：30。

wmode ： 設置該項為transparent 可以使瀏覽按鈕的flash背景文件透明，并且flash文件會被置為頁面的最高層。 默認值：opaque 。

cancelImg ：選擇文件到文件隊列中后的每一個文件上的關閉按鈕圖標。

fileExt ： 設置可以選擇的文件的類型，格式如：’*.doc;*.pdf;*.rar’ 。

運用時，我們引入**.uploadify.min.js及uploadify.css文件，?前提是我們需要引入jquery文在先

然后即可在js中插入相應的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’,

‘auto’: false,

‘multi’: true,

‘onInit’:function(){alert(“1”);},

‘onSelect’: function(e, queueId, fileObj){

alert(“唯一標識:” + queueId + “rn” );

}

});

});

需要注意的是，uploadify方法一定要加載在初始化方法中，否則無效果，具體的參數設定就由你當前的功能決定了。到這一步，一個js上傳與帶進度條預覽的效果便完成了，用uploadify組件即減少了代碼輸出量，也使頁面效果更美觀。

總結

以上是生活随笔為你收集整理的jquery.uploadify php,jquery组件Uploadify的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。