这段时间做了一个项目用到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. redux 最简例子

    方便初学redux的同学学习,这里是最简单的redux例子 1 import React, {Component, PropTypes} from 'react' 2 import ReactDOM ...

  2. git报错：'fatal:remote origin already exists'怎么处理？附上git常用操作以及说明。

    git添加远程库的时候有可能出现如下的错误, 怎么解决? 只要两步: 1.先删除 $ git remote rm origin 2.再次执行添加就可以了. ---------------------- ...

  3. Asp.Net Core 2.0 项目实战（7）MD5加密、AES&DES对称加解密

    本文目录 1. 摘要 2. MD5加密封装 3. AES的加密.解密 4. DES加密/解密 5. 总结 1.  摘要 C#中常用的一些加密和解密方案,如:md5加密.RSA加密与解密和DES加密等, ...

  4. sublime下配置C/C++运行环境

    最近在学习<WEB前端课程>老师教我们使用DW,但是不太喜欢,就选择了sublime,写前端代码还是很方便. 平时都是写C++,C比较多,借鉴了别人的配置步骤,将sublime打造成IDE ...

  5. pentaho cde 自定义复选下拉框 checkbox select

    pentaho  自带的component 虽多,但是当用户需要在一个表格中查看多个组别的数据时,pentaho自带的单选框就不能实现了,所以复选下拉框势在必行,实现效果如下: 实现原理是借用了jqu ...

  6. Java Socket通信代码片

    package zhang; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOExcept ...

  7. 监控undo空间和临时段的使用情况

    --1.监控undo空间情况 ),) free_space from dba_free_space where tablespace_name='UNDOTBS1' group by tablespa ...

  8. 如何搭建samba服务？

    为了日后便于查询,本文所涉及到的所有命令集合如下: chkconfig iptables off #关闭防火墙命令 在Centos7中使用的是chkconfig firewalld off seten ...

  9. CRM客户关系管理系统（五）

    第五章.分页功能开发 5.1.修改BaseKingAdmin和完善前段页面显示 现在访问没有注册的model会报错,因为基类中没有写list_display和list_filter. 在基类中设置一个 ...

  10. APP自动化框架LazyAndroid使用手册（1）--框架简介

    作者:cryanimal  QQ:164166060 APP自动化简介 APP自动化,即通过自动化的方式,对APP施行一系列的仿按键输入.触摸屏输入.手势输入等操作,以达到对APP的功能进行自动化测试 ...