这段时间做了一个项目用到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. Windows Phone 十七、Socket

    Socket 常用类型 StreamSocket:Socket对象 StreamSocketListener:Socket监听对象,适用于服务端 服务端代码 <Grid x:Name=" ...

  2. NSAttributedString字符串属性类

    //定义一个可变字符串属性对象aStr NSMutableAttributedString *aStr = [[NSMutableAttributedString alloc]initWithStri ...

  3. java 关键字 assert的学习

    之前在学习java源码时,发现了assert这个不常用的关键字.下面直接来介绍下这个关键字的使用. assert是什么? 它是jdk1.4之后新增加的关键字,没了. assert的作用是什么? ass ...

  4. Oracle EBS FND User Info API (转) EBS用户账号密码职责相关

    . 与用户信息相关API PKG. --和用户处理有关的API FND_USER_PKG; --和用户密码处理有关的API FND_WEB_SEC; --和用户职责处理有关的API FND_USER_ ...

  5. maven创建的Web工程，Eclipse 内 tomcat容器不识别的处理方法

    相信很多人都遇到这个问题,简单的说明下处理方式 前提是maven配置都是ok的,这里不多说了 1.创建web工程 mvn archetype:create -DgroupId=com.XXX.YYY ...

  6. HTML和CSS的复习总结

    HTML(Hypertext Markup Language)超文本标记语言:其核心就是各种标记!<html> HTML页面中的所有内容,都在该标签之内:它主要含<head>和 ...

  7. mybatis研究：select性能对比

    package sss.mybatis_1; import java.io.InputStream; import java.security.Principal; import java.util. ...

  8. dataGridViewX和数据库的链接之dataGridViewX1.DataSource = ds.Tables[0];

    dataGridViewX1.DataSource = ds.Tables[0]; 1, dataGridViewX和数据库链接,如果我们用 dataGridViewX1.DataSource = d ...

  9. java在图片上添加文字

    业务需求要在图片上添加水印.下面粘出代码供自己和大家分享 package com.pro.drawTextOnImg; import java.awt.Color; import java.awt.F ...

  10. jQuery 增加 删除 修改select option .

    jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...