有關uploadifive的使用經驗

時間 2019-11-19

標籤有關 uploadifive 使用經驗简体版

原文原文鏈接

這段時間作了一個項目用到uploadifive上傳控件，和uploadify不一樣，這個控件是基於HTML5的版本而不用支持falsh，於是移動端也能夠使用。css

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

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

例子以下：jquery

　　1.首先頁面須要引進js和css文件瀏覽器

　　2.uploadifive控件的具體應用ide

$(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.簡化後的頁面post

<!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>

以上是我我的使用的狀況，我的以爲蠻不錯，有不足的地方但願園子前輩指點一下。ui

相關標籤/搜索

每日一句

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