这段时间做了一个项目用到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. ubuntu 命令行下格式化U盘，磁盘分区

    命令行格式化磁盘一般是:先卸载,后格式化. 先说格式化U盘的方法,格式化磁盘某个分区是同样的道理. 一般情况下U盘会挂载在/meida/<username>/<disk>目录下 ...

  2. qPCR检测基因表达的引物数据库

    老板推荐了一个专门用来做基因表达定量(qPCR)的引物数据库,还蛮好用的,都是别人实验验证过的,感觉比自己设计的更靠谱一下,附上链接:https://pga.mgh.harvard.edu/prime ...

  3. 牛客网编程练习之PAT乙级(Basic Level)：1033 害死人不偿命的(3n+1)猜想

    3n+1水题.... AC代码: import java.util.Scanner; /** * @author CC11001100 */ public class Main { public st ...

  4. Node.js Path 模块

    Node.js path 模块提供了一些用于处理文件路径的小工具,我们可以通过以下方式引入该模块: var path = require("path") 方法 序号 方法 & ...

  5. Django URL (路由系统)

    URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL模式以及要为该URL模式调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于这个URL调用这段代码,对于那 ...

  6. Rails关闭html_safe字符串过滤

    在某些情况下我希望html的文本中包含一些换行,因为html5产生换行的方法是插入 <br />所以我可以这么写: text = "hello world!<br /> ...

  7. Winform DevExpress控件库（一） DevExpress控件库的安装与新建第一个DevExpress项目

    前言:因为这段时间要接触到DevExpress控件库,而我本身甚至对winform的控件都了解甚少,所以处在学习中,写下博客主要是为了方便后期的回顾,当然也可以给一些新人第一次接触时做为学习的参考,以 ...

  8. Docker与容器

    Docker介绍 1. Docker 主要解决什么问题 Docker 对外宣称的是Build.Ship 和Run,Docker 要解决的核心问题就是快速地干这三件事情.它通过将运行环境和应用程序打包到 ...

  9. 通过grub-install命令把grub安装到u盘

    通过grub-install命令把grub安装到u盘 ①准备一个u盘,容量不限,能有1MB都足够了. ②把u盘格式化(我把u盘格式化成FAT.fat32格式了,最后证明也是成功的).③开启linux系 ...

  10. Android简易实战教程--第三十二话《使用Lrucache和NetworkImageView加载图片》

    转载本专栏每一篇博客请注明转载出处地址,尊重原创.此博客转载链接地址:小杨的博客    http://blog.csdn.net/qq_32059827/article/details/5279131 ...