有關uploadifive的使用經驗 - itBscs－IT工程師數位筆記本

文章出處

這段時間做了一個項目用到uploadifive上傳控件，和uploadify不同，這個控件是基于HTML5的版本而不用支持falsh，因而移動端也可以使用。

整理用過的相關屬性與方法：

屬性	作用
auto	是否自動上傳，默認true
uploadScript	上傳路徑
fileObjName	file文件對象名稱
buttonText	上傳按鈕顯示文本
queueID	進度條的顯示位置
fileType	上傳文件類型
multi	是否允許多個文件上傳，默認為true
fileSizeLimit	允許文件上傳的最大尺寸
uploadLimit	一次可以上傳的最大文件數
queueSizeLimit	允許隊列中存在的最大文件數
removeCompleted	隱藏完成上傳的文件，默認為false
方法	作用
onUploadComplete	文件上傳成功后執行
onCancel	文件被刪除時觸發
onUpload	開始上傳隊列時觸發
onFallback	HTML5 API不支持的瀏覽器觸發

例子如下：

　　1.首先頁面需要引進js和css文件

　　2.uploadifive控件的具體應用

$(function() {
    $('#signup-idimage1').uploadifive({
        'auto' : true,
        'uploadScript' : 'uploadPhoto',
        'fileObjName' : 'upload',
        'buttonText' : '上傳照片',
        'queueID' : 'tip-queue1',
        'fileType' : 'image/*',
        'multi' : false,
        'fileSizeLimit'   : 5242880,
        'uploadLimit' : 1,
        'queueSizeLimit'  : 1,   
        'onUploadComplete' : function(file, data) {
            var obj = JSON.parse(data);
            if (obj.img == "500") {
                alert("系統異常！");
            } else {
                $("#frontSide").val(obj.img);
                document.getElementById("submit").disabled = false;
            }
        },
        onCancel : function(file) {
           $("#frontSide").val("");
            /* 注意：取消后應重新設置uploadLimit */
            $data    = $(this).data('uploadifive'),
            settings = $data.settings;
            settings.uploadLimit++;
            alert(file.name + " 已取消上傳~!");
        },
        onFallback : function() {
            alert("該瀏覽器無法使用!");
        },
        onUpload : function(file) {
            document.getElementById("submit").disabled = true;//當開始上傳文件，要防止上傳未完成而表單被提交
        },
    });
});

　　3.簡化后的頁面

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1">
<title>注冊</title>
<link rel="stylesheet" type="text/css"
    href="../uploadiFive/uploadifive.css" />
<script src="../js/jquery-1.7.2.js"></script>
<script src="js/mobileupload.js"></script>
<script src="../uploadiFive/jquery.uploadifive.js"></script>

</head>

<body>
            <form class="cd-form" id="subForm"
                action="openaccount" method="post">
                    <div id="cd-signup">
                        <p class="fieldset">
                            <label class="image-replace cd-photo1" for="signup-idimage1"></label>
                            <input class="full-width has-padding has-border"
                                id="signup-idimage1" type="file" name="upload">
                            <input type="hidden" name="frontSide" id="frontSide">
                        <div id="tip-queue1"></div>
                        </p>
                        </p>
                        <p class="fieldset">
                            <input class="full-width2" id="submit" type="submit" value="提交">
                        </p>
            </form>
</body>
</html>