这段时间做了一个项目用到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的使用经验的更多相关文章

  1. 有关uploadifive的使用经验（转:http://www.cnblogs.com/itBscs/p/4781786.html ）

     这段时间做了一个项目用到uploadifive上传控件,和uploadify不同,这个控件是基于HTML5的版本而不用支持falsh,因而移动端也可以使用. 整理用过的相关属性与方法: 属性 作 ...

  2. MyEclipse10--的使用经验

    MyEclipse10--的使用经验总结 ------------------ 1.MyEclipse中的验证validation----->>用MyEclipse做ExtJs项目研发的时 ...

  3. XCode的个人使用经验

    Xcode是强大的IDE(但个人觉得不如Visual Studio做得好),其强大功能无需本人再赘述,本文也不是一篇“快捷键列表”,因为XCode上的快捷键极其多,而且还有不少是需要同时按下四个按键的 ...

  4. Uploadify/uploadifive上传(中文文档)

    Uploadify是一款基于JQuery的优秀的文件/图片上传的插件,有基于Flash和HTML5两种版本.  Uploadify/uploadifive主要特点有: 1. 多文件上传 2. 个性化设 ...

  5. Flask-admin使用经验技巧总结

    笔者是看狗书入门的flask,狗书上对于flask-admin这个扩展并没有进行讲解,最近因为项目需要,学习使用flask-admin,瞬间体会到了flask开发的快速.扩展的强大 Flask-adm ...

  6. Unity3D使用经验总结 缺点篇

    不论是从官方手册,还是各种第三方教程,几乎涉及到的,都是讲如何使用U3D,以及U3D的优点. 虽然我是用的一个让步语气,但请不要否认U3D的这些优点,它们的确存在. 但对于一个引擎的特性来说,优点与缺 ...

  7. Unity3D使用经验总结 优点篇

    09年还在和其它小伙伴开发引擎的时候,Unity3D就初露头角. 当时就对这种基于组件式的设计结构很不理解. 觉得拆分过于细致,同时影响效率. 而时至今日,UNITY3D已经成为了众多团队的首选3D引 ...

  8. 使用Uploadify(UploadiFive)多文件上传控件遇到的坑

    最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...

  9. 控件使用经验-MVP模式+控件封装

    项目背景 几年前参与了一个面向学校的人事管理软件的开发,基于WinForm平台.今天主要想谈一谈其中关于控件的使用经验.这个项目我们大量使用了第三方控件.由于这个产品的生命周期很长,我们在设计时要考虑 ...

随机推荐

  1. MFC Picture控件加载图片

    CStatic *pPic = (CStatic*)GetDlgItem(IDC_PICTURE); CBitmap bitmap; bitmap.LoadBitmapW(IDB_BITMAP2); ...

  2. csuoj 1392: Number Trick

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1392 1392: Number Trick Time Limit: 1 Sec  Memory L ...

  3. 网络适配器输入的IP地址 已经分配给另一个适配器

    解决步骤:1.开始-运行-cmd2. set devmgr_show_nonpresent_devices=123.set devmgr_show_nonpresent_devices=14.star ...

  4. 夺命雷公狗----Git---7---GitHub当仓库本地使用（完）

    首先我们将github上的东西克隆到本地: 然后在本地创建一个文件夹,然后进入git命令行: 成功后如下所示: 将仓库里面的内容给克隆到本地了... 然后创建一个index.html然后添加进去: 在 ...

  5. WSF脚本详解：组合JS和VBS代码

    1.概述 Windows Script Host除了提供一个对象模型之外,还提供了一种脚本框架,这就是WSF脚本.通过WSF约定的标记元素,可以将多种脚本语言写的代码块组合起来,完成任务.除此之外,还 ...

  6. easyUI+springMVC的DataGrid-demo

    DataGrid (一).搭建springMVC: 错误:无法访问HTML页面,HTTP Status 404- 原因:springMVC拦截了静态资源的访问 解决方案:方案①:(web.xml下)& ...

  7. Objective-C文章中的生词

    Objective-C http://rypress.com/tutorials/objective-c/index C Basics    http://rypress.com/tutorials/ ...

  8. python 学习（二）--关于类

    1.没有权限控制,在类方法或变量前加 "__" 两下划线,则变为"私有"变量(实际通过_<类名>__<变量或方法名> 可以访问) 2.类 ...

  9. make phpexcel working with XAMPP7.0.9

    Environment XAMPP 7.0.9 (PHP 7.0.9) PHPExcel 1.7.6-1.8.1 not lib_zip.dll Windows 10.1 thinkPHP 5.0.1 ...

  10. Python导入Scipy子模块时出错

    导入Scipy子模块时报错,出现的问题都是提示 61 from numpy._distributor_init import NUMPY_MKL  # requires numpy+mklNo mod ...