對(duì)于HTML5版本會(huì)比較好的支持手機(jī)瀏覽器,避免蘋果手機(jī)Safari瀏覽器不支持
Flash,主要特性:支持多文件上傳、HTML5版本可拖拽上傳、實(shí)時(shí)上傳進(jìn)度條顯示、強(qiáng)大的參數(shù)
定制功能,如文件大小、文件類型、按鈕圖片定義、上傳文件腳本等。
Flash版本使用方法:
1.加載JS和CSS
復(fù)制代碼 代碼如下:
 
<script src="jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link type="text/css" href="uploadify.css">
2.編寫HTML內(nèi)容
復(fù)制代碼 代碼如下:
<form>
<div></div>
<input type="file" multiple="true">
</form>
復(fù)制代碼 代碼如下:
<script type="text/javascript">
        $(document).ready(function()
        {
            $("#file_upload").uploadify({
                'uploader': 'uploadify.swf',
                'script': 'UploadHandler.php',                
                'folder': 'UploadFile',
                'queueID': 'fileQueue',
                'auto': true,
                'multi': true
            });
        });  
</script>
4.更多參數(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屬性后才有效,用來設(shè)置選擇文件對(duì)話框中的提示文本,如設(shè)
置fileDesc為“請(qǐng)選擇rar doc pdf文件”
fileExt : 設(shè)置可以選擇的文件的類型,格式如:'*.doc;*.pdf;*.rar' 。 
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)
上面介紹的key值的value都為字符串或是布爾類型,比較簡(jiǎn)單,接下來要介紹的key值的value為一個(gè)函數(shù),可以在選擇文件、出錯(cuò)或其他一些操作的時(shí)候返回一些信息給用戶。
onInit : 做一些初始化的工作
onSelect :選擇文件時(shí)觸發(fā),該函數(shù)有三個(gè)參數(shù)
event:事件對(duì)象。
queueID:文件的唯一標(biāo)識(shí),由6為隨機(jī)字符組成。
fileObj:選擇的文件對(duì)象,有name、size、creationDate、modificationDate、type 5個(gè)屬性。
代碼如下:
復(fù)制代碼 代碼如下:
 
<script type="text/javascript">
$(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("唯一標(biāo)識(shí):" + queueId + "/r/n" +
                  "文件名:" + fileObj.name + "/r/n" +
                  "文件大小:" + fileObj.size + "/r/n" +
                  "創(chuàng)建時(shí)間:" + fileObj.creationDate + "/r/n" +
                  "最后修改時(shí)間:" + fileObj.modificationDate + "/r/n" +
                  "文件類型:" + fileObj.type
            );
        }
    });
});
</script>
新聞熱點(diǎn)
疑難解答
圖片精選