这段时间做了一个项目用到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的使用经验（转:http://www.cnblogs.com/itBscs/p/4781786.html ）的更多相关文章

  1. 有关uploadifive的使用经验

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

  2. dcef3 基本使用经验总结

    dcef3 基本使用经验总结 https://www.cnblogs.com/h2285409/p/10517483.html 加载命令启动参数    --enable-system-flash 会加 ...

  3. MyBatis持久层框架使用总结

    MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis . 2 ...

  4. rabbitmq集群几个比较好的文章

    以下几个链接可作为搭建rabbitmq集群是的参考,个人觉得写的很详细很好 1.RabbitMQ 高可用集群搭建及电商平台使用经验总结 http://www.cnblogs.com/wangiqngp ...

  5. 走进异步世界-犯傻也值得分享：ConfigureAwait(false)使用经验分享

    在上周解决“博客程序异步化改造之后遭遇的性能问题”的过程中,我们干了一件自以为很有成就感的事——在表现层(MVC与WebForms)将所有使用await的地方都加上了ConfigureAwait(fa ...

  6. [转]Session服务器配置指南与使用经验

    本文转自:http://www.cnblogs.com/zhangziqiu/archive/2009/03/26/SessionServer.html 一.摘要 所有Web程序都会使用Session ...

  7. Project_Lemon测评系统使用经验

    Project_Lemon使用经验 如果您还没有安装Project_Lemon,那么请移步https://www.cnblogs.com/CreeperLKF/p/9201859.html去查阅安装教 ...

  8. 吐血大奉献，打造cnblogs最新最火辣的css3模板（IE9以下请勿入内） -- 第一版

    一直自己都想给自己的博客打造一个独一无二的皮肤,但是一直没有强劲的动力去完成这件事情.后来凭借着工作上面的需求(涉及到css3),就把自己的博客当成一个最好的试验场地.从而产生了你现在所看到的这个模板 ...

  9. 已经重写，源码和文章请跳转http://www.cnblogs.com/ymnets/p/5621706.html

    文章由于写得比较仓促 已经重写,源码和文章请跳转 http://www.cnblogs.com/ymnets/p/5621706.html 系列目录 前言: 导入导出实在多例子,很多成熟的组建都分装了 ...

随机推荐

  1. 读书笔记-《Maven实战》-关于Maven依赖传递的思考 2018/4/26

    上次读书笔记中,提到了依赖传递.看着依赖传递表,一直在思考为什么会是这样. 先看传递表: compile test provided runtime compile test provided run ...

  2. IE10以下兼容H5中的placeholder 以及改变它默认颜色

    placeholder是H5<input>的属性之一,可惜在IE10以下不支持,万恶的IE!不过正因为有IE,才多了很多捣鼓,添了乐趣.不支持就不支持呗,自己动手丰衣足食,我们可以用js模 ...

  3. POJ 2135 最小费用最大流

    题目链接 Farm Tour Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 18961   Accepted: 7326 D ...

  4. ACM 饭卡

    Problem Description 电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负) ...

  5. PHP 5 Date/Time 函数

    PHP Date/Time 简介 Date/Time 函数允许您从 PHP 脚本运行的服务器上获取日期和时间.您可以使用 Date/Time 函数通过不同的方式来格式化日期和时间. 注释:这些函数依赖 ...

  6. jboss规则引擎KIE Drools 6.3.0 Final 教程(3)

    在前2部教程中,介绍了如何在本地运行.drools文件以及使用stateless的方法访问远程repository上的规则. KIE Drools还提供了一种叫有状态-stateful的访问方式. 运 ...

  7. Linux 高性能服务器编程——高性能服务器程序框架

    问题聚焦:     核心章节.     服务器一般分为如下三个主要模块:I/O处理单元(四种I/O模型,两种高效事件处理模块),逻辑单元(两种高效并发模式,有效状态机)和存储单元(不讨论). 服务器模 ...

  8. Android中的语言和字符串资源

    在任何情况下,从您的应用代码中提取 UI 字符串并将其存放在外部文件中都是个好办法.Android 在每个 Android 项目中都提供一个资源目录,从而简化了这一过程. 如果您是使用 Android ...

  9. Android的log日志知识点剖析

    log类的继承结构 Log public final class Log extends Object java.lang.Object ↳ android.util.Log log日志的常用方法 分 ...

  10. frameset 与frame 设置的技巧

    今天来写点不一样的.如下图: 实现的效果就是原生的类似于导航形式的frameset. frameset 注意: 包含frameset的网页应该只是作为框架而存在,所以不能有body标签. 这个标签可以 ...