这段时间做了一个项目用到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. 设置更新源和下载ferret

    kali无法定位软件包 解决: deb http://http.kali.org/kali kali-rolling main non-free contrib kali可用的官方更新源(cd /et ...

  2. 修改后的CopyFile类

    这是修改后的CopyFile类,前面那个类有局限性,它不能复制大文件 这是我第一次写成一个能够实际应用的类,感谢博主们的无私奉献,感谢SeayXu老师的提点 但是这个类也并不是完美无缺,它复制文件没有 ...

  3. Intent传递数据的方法

    一.传递List 1.传递List<String>的方法 ArrayList<String> info = new ArrayList<String>(); inf ...

  4. [转]Google Guava官方教程（中文版）

    Google Guava官方教程(中文版) http://ifeve.com/google-guava/

  5. phpcms v9联动菜单的调用方法及get_linkage函数简单过程

    {get_linkage($r['areaid'],1,' >> ',1)} 复制代码 当然这个 $r 也不是绝对的.要看你的loop 是如何写的. {loop $data $n $r} ...

  6. Dom编程

    Dom编程 Dom是一种用于HTML和XML文档的编程接口,是HTML页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制 ...

  7. 20161020001 DataGridView 选中的 DataGridViewCheckBoxCell 不添加重复项

    private void btn_add_Click(object sender, EventArgs e)        {            string str_P_ID = "& ...

  8. API Monitor v2.0 Alpha-r13 (32+64) 汉化版

    API Monitor v2.0 Alpha-r13 (32+64) 汉化版: 链接: https://pan.baidu.com/s/1jIx5znC 密码: 4538 本软件已最大化汉化,已经趋于 ...

  9. XArp汉化破解专业版，强大易用的ARP欺骗检测器

    汉化作者:Bluefish 破解来自:http://www.52pojie.cn/thread-464808-1-1.html官方网站:http://www.xarp.net/ ----------- ...

  10. shell技巧

    如何实现Shell脚本以DEAMON的方式运行,即实现Shell版的Fork if [ "$1" != 'background' ] ; then scriptdir=$(cd & ...