这段时间做了一个项目用到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. Hibernate中Session之get和load方法的真正区别

    最近在学习SHH框架中的hibernate,对Session的get和load方法,有点混不清楚,不知道区别在哪,或者对它们的区别感触不深.所以百度了一下,结果问题来了.百度的结果和实际测试的结果出入 ...

  2. 项目管理软件系列-Linux一键安装禅道

    linux用一键安装包 简介:本文介绍如何在linux下面使用禅道一键安装包搭建禅道的运行环境. linux一键安装包内置了apache, php, mysql这些应用程序,只需要下载解压缩即可运行禅 ...

  3. 独立完成一个移动点餐wap后的小结

    1.技术栈:vue  vue-router  vuex  Mint-ui  better-scroll; 2.实践总结: a.单页应用不重新渲染组件问题:组件在初次渲染后不会重新渲染,此时当从某个路径 ...

  4. delphi 线程教学第七节：在多个线程时空中，把各自的代码塞到一个指定的线程时空运行

    第七节:在多个线程时空中,把各自的代码塞到一个指定的线程时空运行     以 Ado 为例,常见的方法是拖一个 AdoConnection 在窗口上(或 DataModule 中), 再配合 AdoQ ...

  5. Web API对application/json内容类型的CORS支持

    假设有一简单架构分为前后两部分,其一是Angular构成的前端页面站点,另一个则是通过ASP.NET Web API搭建的后端服务站点.两个站点因为分别布署,所有会有CORS(Cross-Origin ...

  6. 如何恢复Initial commit之前的源文件

    在github新建了一个空的库,然后到本地文件夹下,git init了一下,将remote和本地的关联起来了,然后git pull了一下,本地的项目源码全没了,用以下命令可以帮你恢复 git refl ...

  7. 小白到大神，Python 密集知识点汇总

    Python 基础 1. 变量 你可以把变量想象成一个用来存储值的单词.我们看个例子. Python 中定义一个变量并为它赋值是很容易的.假如你想存储数字 1 到变量 "one" ...

  8. Linux Mint 17一周使用体验

    1 Win7下安装Mint双系统 Linux Mint支持直接从Win7硬盘引导安装,非常方便,不用制作U盘引导,更不用刻盘安装了.Mint有Cinnamon和Mate两种桌面,听说Mate更加简洁节 ...

  9. Dynamics CRM2016 使用web api来创建注释时的注意事项

    在使用wei api 创建注释的时候,有个字段需要注意下,就是下面图中的objectid字段,虽然它是个查找字段,但不能像普通的查找字段property@odata.bind来赋值 上代码,注意看倒数 ...

  10. iOS 应用提交到iTunes Connect，显示"正在处理"后消失不见

    打包上传iTunes Connect 成功后,进入iTunes Connect 会看到如下的构建信息: 可是,过一会再刷新该页面,构建的版本就消失了. 出现如上所述的情况,主要目前已知的有两种原因: ...