asp uploadify示例下載

時間 2019-11-10

標籤 asp uploadify 示例下載欄目 ASP 简体版

原文原文鏈接

　2013-01-22：增長asp的支持，因爲使用了utf-8編碼asp以原文件名保存時文件名包含中文會出現亂碼，因此另外給文件命名，以當前時間＋隨機數命名。javascript

　　uploadify下載，動態頁採用了asp.net的ashx，Uploadify版本爲3.2，最新版。

　　uploadify是一款基於jquery框架和flash的無刷新上傳組件，因爲使用了flash，因此能夠在客戶端檢查文件大小，限制能夠選擇哪些類型，一次選擇多個文件進行無刷新上傳。php

　　備註：注意須要導入jquery框架。

　　若是瀏覽器未安裝flash播放器插件，則默認使用原始的file控件進行上傳。

配置說明以下Options選項設置css

auto    選擇文件後自動上傳
buttonClass    給「瀏覽按鈕」加css的class樣式
buttonCursor    鼠標移上去形狀：arrow箭頭、hand手型（默認）
buttonImage    鼠標移上去變換圖片
buttonText    按鈕文字
checkExisting    在目錄中檢查文件是否已上傳成功（1 ture,0 false）
debug        是否顯示調試框（默認不顯示false）
fileObjName    設置一個名字，在服務器處理程序中根據該名字來取上傳文件的數據。默認爲Filedata，$tempFile = $_FILES['Filedata']['tmp_name']
fileSizeLimit    設置容許上傳文件最大值B, KB, MB, GB 好比：'fileSizeLimit' : '20MB'
fileTypeDesc    選擇的文件的描述。這個字符串出如今瀏覽文件對話框中文件類型下拉框處。默認：All Files
fileTypeExts    容許上傳的文件類型。格式：'fileTypeExts' : '*.gif; *.jpg; *.png'
formData    附帶值，須要經過get or post傳遞的額外數據，須要結合onUploadStart事件一塊兒使用
height        「瀏覽按鈕」高度px
itemTemplate    <itemTemplate>節點表示顯示的內容。這些內容中也能夠包含綁定到控件DataSource屬性中元素集合的數據。
method        上傳方式。默認：post
multi        選擇文件時是否能夠【選擇多個】。默認：能夠true
overrideEvents    不執行默認的onSelect事件
preventCaching    隨機緩存值 默認true ，可選true和false.若是選true,那麼在上傳時會加入一個隨機數來使每次的URL都不一樣,以防止緩存.可是可能與正常URL產生衝突
progressData    進度條上顯示的進度:有百分比percentage和速度speed。默認百分比
queueID        給「進度條」加背景css的ID樣式。文件選擇後的容器ID
queueSizeLimit    容許多文件上傳的數量。默認：999
removeCompleted    上傳完成後隊列是否自動消失。默認：true
removeTimeout    上傳完成後隊列多長時間後消失。默認 3秒    須要：'removeCompleted' : true,時使用
requeueErrors    隊列上傳出錯，是否繼續回滾隊列，即反覆嘗試上傳。默認：false
successTimeout    上傳超時時間。文件上傳完成後,等待服務器返回信息的時間(秒).超過期間沒有返回的話,插件認爲返回了成功。 默認：30秒
swf        swf文件的路徑,本文件是插件自帶的,不可用其它的代替.本參數不可省略
uploader    上傳處理程序URL，本參數不可省略
uploadLimit    限制總上傳文件數,默認是999。指同一時間，若是關閉瀏覽器後從新打開又可上傳。
width        「瀏覽按鈕」寬度px

Events 事件
onCancel    當取消一個上傳隊列中的文件時觸發,刪除時觸發
onClearQueue    清除隊列。當'cancel'方法帶着*參數時,也就是說一次所有取消的時候觸發.queueItemCount是被取消的文件個數（另外的按鈕）
onDestroy    取消全部的上傳隊列（另外的按鈕）
onDialogClose    當選擇文件對話框關閉時觸發,不管是點的'肯定'仍是'取消'都會觸發.若是本事件被添加進了'overrideEvents'參數中,那麼若是在選擇文件時產生了錯誤,不會有錯誤提示框彈出
onDialogOpen    當選擇文件框被打開時觸發,沒有傳過來的參數
onDisable    關閉上傳
onEnable    開啓上傳
onFallback    檢測FLASH失敗調用
onInit        每次初始化一個隊列時觸發
onQueueComplete    當隊列中的全部文件上傳完成時觸發
onSelect    當文件從瀏覽框被添加到隊列中時觸發
onSelectError    選擇文件出錯時觸發
onSWFReady    flash準備好時觸發
onUploadComplete當一個文件上傳完成時觸發
onUploadError    當文件上傳完成可是返回錯誤時觸發
onUploadProgress上傳彙總
onUploadStart    一個文件上傳之間觸發
onUploadSuccess    每一個上傳完成併成功的文件都會觸發本事件

Methods 方法
cancel        取消一個上傳隊列
destroy        取消全部上傳隊列
disable        禁止點擊「瀏覽按鈕」
settings    返回或修改一個 uploadify實例的settings值
stop        中止當前的上傳並從新添加到隊列中去
upload        上傳指定的文件或者全部隊列中的文件

　　使用示例html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>uploadify 多文件上傳例子</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script src="jquery.uploadify-3.1.min.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="uploadify.css"> 
<style type="text/css">   
    body {   
        font: 13px Arial, Helvetica, Sans-serif;   
    }   
    .haha{   
        color:#FFFFFF;   
    }   
    #queue {   
        background-color: #FFF;   
        border-radius: 3px;   
        box-shadow: 0 1px 3px rgba(0,0,0,0.25);   
        height: 103px;   
        margin-bottom: 10px;   
        overflow: auto;   
        padding: 5px 10px;   
        width: 300px;   
    }   
    </style> 
</head> 


<body> 
<h1>Uploadify Demo</h1> 
<form> 
<div id="queue"></div> 
<input id="file_upload" name="file_upload" type="file" multiple="true"> 
</form> 

<script type="text/javascript">   
            $(function() {   
                $('#file_upload').uploadify({   
                    'debug'         : false,   
                    'auto'          : true,             //是否自動上傳,   
                    'buttonClass'   : 'haha',           //按鈕輔助class   
                    'buttonText'    : '上傳圖片',       //按鈕文字   
                    'height'        : 30,               //按鈕高度   
                    'width'         : 100,              //按鈕寬度   
                    'checkExisting' : 'check-exists.php',//是否檢測圖片存在,不檢測:false   
                    'fileObjName'   : 'files',           //默認 Filedata, $_FILES控件名稱   
                    'fileSizeLimit' : '1024KB',          //文件大小限制 0爲無限制 默認KB   
                    'fileTypeDesc'  : 'All Files',       //圖片選擇描述   
                    'fileTypeExts'  : '*.gif; *.jpg; *.png',//文件後綴限制 默認：'*.*'   
                    'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},//傳輸數據JSON格式   
                    //'overrideEvents': ['onUploadProgress'],  // The progress will not be updated   
                    //'progressData' : 'speed',             //默認percentage 進度顯示方式   
                    'queueID'       : 'queue',              //默認隊列ID   
                    'queueSizeLimit': 20,                   //一個隊列上傳文件數限制   
                    'removeCompleted' : true,               //完成時是否清除隊列 默認true   
                    'removeTimeout'   : 3,                  //完成時清除隊列顯示秒數,默認3秒   
                    'requeueErrors'   : false,              //隊列上傳出錯，是否繼續回滾隊列   
                    'successTimeout'  : 5,                  //上傳超時   
                    'uploadLimit'     : 99,                 //容許上傳的最多張數   
                    'swf'  : 'uploadify.swf', //swfUpload   
                    'uploader': 'uploadify.php', //服務器端腳本   
       
       
                    //修改formData數據   
                    'onUploadStart' : function(file) {   
                        //$("#file_upload").uploadify("settings", "someOtherKey", 2);   
                    },   
                    //刪除時觸發   
                    'onCancel' : function(file) {   
                        //alert('The file ' + file.name + '--' + file.size + ' was cancelled.');   
                    },   
                    //清除隊列   
                    'onClearQueue' : function(queueItemCount) {   
                        //alert(queueItemCount + ' file(s) were removed from the queue');   
                    },   
                    //調用destroy是觸發   
                    'onDestroy' : function() {   
                        alert('我被銷燬了');   
                    },   
                    //每次初始化一個隊列是觸發   
                    'onInit' : function(instance){   
                        //alert('The queue ID is ' + instance.settings.queueID);   
                    },   
                    //上傳成功   
                    'onUploadSuccess' : function(file, data, response) {   
                        //alert(file.name + ' | ' + response + ':' + data);   
                    },   
                    //上傳錯誤   
                    'onUploadError' : function(file, errorCode, errorMsg, errorString) {   
                        //alert('The file ' + file.name + ' could not be uploaded: ' + errorString);   
                    },   
                    //上傳彙總   
                    'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {   
                        $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');   
                    },   
                    //上傳完成   
                    'onUploadComplete' : function(file) {   
                        //alert('The file ' + file.name + ' finished processing.');   
                    },   
                    
                });   
            });   
       
       
            //變換按鈕   
            function changeBtnText() {   
                $('#file_upload').uploadify('settings','buttonText','繼續上傳');   
            }   
       
       
            //返回按鈕   
            function returnBtnText() {   
                alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));   
            }   
        </script> 
<h4>操做:</h4> 
<a href="javascript:$('#file_upload').uploadify('upload', '*');">開始上傳</a> | 
<a href="javascript:$('#file_upload').uploadify('cancel', '*');">清除隊列</a> | 
<a href="javascript:$('#file_upload').uploadify('destroy');">銷燬上傳</a> | 
<a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上傳</a> | 
<a href="javascript:$('#file_upload').uploadify('disable', false);">激活上傳</a> | 
<a href="javascript:$('#file_upload').uploadify('stop');">中止上傳</a> | 
<a href="javascript:changeBtnText();">變換按鈕</a> | 
<h4>大小:</h4> 
<div id='progress'></div> 
</body> 
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。