这段时间做了一个项目用到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. html中input标签的tabindex属性

    当浏览者浏览网站时可以通过按TAB键在网页的链接中依次移动,这是一个相当方便实用的功能.但如果网页中链接太多,恐怕按TAB键就没什么作用了,这时不妨通过改变TAB键移动的顺序来突出重点,在某些重要页面 ...

  2. C/C++ 结构体 数组 简单输入输出

    #include <stdio.h> #include <stdlib.h> struct student{ int num; ]; double dec; }; int ma ...

  3. [原创]java WEB学习笔记105：Spring学习---AOP介绍，相关概念，使用AOP，利用 方法签名 编写 AspectJ 切入点表达式

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  4. 3-PHP全部编码UTF-8

    0-html <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ...

  5. 报错：Failed to instantiate the default view controller for UIMainStoryboardFile 'MainStoryboard' - perhaps the designated entry point is not set?

    原因分析:在StoryBoard中没有一个view controller设置了Initial Scene. 解决方案:在Storyboard中,选择一个view conroller作为story bo ...

  6. HTML5探秘：用requestAnimationFrame优化Web动画

    本文转载自: HTML5探秘:用requestAnimationFrame优化Web动画

  7. c#学习 流程控制语句

    语句是啥? 语句就是程序的基本结构.程序是一个人,语句就是人的身体.而写程序的人就是上帝造人的过程. break在swich语句中很严谨 using System; public class Grad ...

  8. 使用C#创建快捷方式

    在Windows中创建快捷方式很简单,直接用右键点击文件或文件夹,选择创建快捷方式即可.如果想用C#代码的方式创建,就没有那么方便了,因为.NET框架没有提供直接创建快捷方式的方法. 首先我们看一下快 ...

  9. WebConfig错误页配置

    在system.web节下配置<customErrors mode="On" defaultRedirect="/ErrorPage/MyErrorPage.htm ...

  10. Meteor全栈开发平台 - 不仅仅是前端

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...