码迷,mamicode.com
首页 > 其他好文 > 详细

有关uploadifive的使用经验

时间:2015-09-04 15:39:05      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

这段时间做了一个项目用到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>

 



以上是我个人使用的情况,个人觉得蛮不错,有不足的地方希望园子前辈指点一下。

 

有关uploadifive的使用经验

标签:

原文地址:http://www.cnblogs.com/itBscs/p/4781786.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!