有关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