这段时间做了一个项目用到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. C++程序员如何入门Unreal Engine 4

    摘要: 一位程序员网友小保哥分享自己的UE4快速上手过程,只是笔记,52VR做了一点更加适合阅读的修改,整理给大家. 首先,本文只是针对有比较熟练C++技能的程序员,他可以没有任何图形学或游戏引擎方面 ...

  2. BeanUtils

    BeanUtils包的使用   BeanUtils工具包是由Apache公司所开发,主要是方便程序员对Bean类能够进行简便的操作. 在使用BeanUtils工具包之前我们需要的Jar包有以下几种: ...

  3. windows下的host文件在哪里？做什么用的?

    在Window系统中有个Hosts文件(没有后缀名),在Windows98系统下该文件在Windows目录,在Windows2000/XP系统中位于C:\Winnt\System32\Drivers\ ...

  4. Python3.4如何读写Excel

    在python3.x(散仙使用的版本是python3.4)里,我们应该如何操作excel. 首先在python3.4里,我们可以使用新的python类库,来支持3.x之后的读写excel 针对 03版 ...

  5. 关于成为Java高级工程师之路

    简单说明一下现状,个人目前学习使用java已经一年半,很迷茫,高不成低不就,在此列一个目标,为期18个月,再来个一年半,这样软件生涯三年后,我必须成为高级工程师! 这里涉及Java各个方面的知识,有的 ...

  6. springMVC--@requestBody

    springMVC支持将前端传来的json字符串直接自动解析,注意点如下: 后台 1,在需要自动解析的参数前加上“@requestBody”,例如“public boolean updateOnePd ...

  7. 【笔记】js parentsNode,lastChild,appendChild,insertBefore,nextSibling的意义及运用

    这几天看书看到这几个属性做几个笔记 parentNode:顾名思义,就是获取某元素的父元素等同于jq的parent(). *注意一下,在调用parentNode 方法的时候 调用的对象必须是用ID 或 ...

  8. jQuery队列操作

    jQuery.queue 1."fx"是什么? 队列动画的默认名称 队列的名字为type + "queue",默认是"fxqueue" 2. ...

  9. Hiho coder 1236 2015 北京网络赛 Score

    五维偏序..一开始被吓到了,后来知道了一种BITSET分块的方法,感觉非常不错. 呆马: #include <iostream> #include <cstdio> #incl ...

  10. nginx+iis、NLB、Web Farm、Web Garden、ARR

    nginx+iis实现负载均衡 在win2008R2上使用(NLB)网络负载均衡 NLB网路负载均衡管理器详解 [译文]Web Farm和Web Garden的区别? IIS负载均衡-Applicat ...