有关uploadifive的使用经验

这段时间做了一个项目用到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>

以上是我个人使用的情况,个人觉得蛮不错,有不足的地方希望园子前辈指点一下。

时间: 2024-10-12 06:41:34

有关uploadifive的使用经验的相关文章

Uploadify/uploadifive上传(中文文档)

Uploadify是一款基于JQuery的优秀的文件/图片上传的插件,有基于Flash和HTML5两种版本. Uploadify/uploadifive主要特点有: 1. 多文件上传 2. 个性化设置 3. 上传进度条显示 4. 拖拽上传(HTML5版本) 官网:http://www.uploadify.com 部署 在部署一个Uploadify实例前,请确保满足最低要求: 1.jQuery 1.4.x 或更高版本 2.Flash Player 9.0.24 或更高版本 3.支持PHP, ASP

jquery uploadifive使用

应为考虑到flash将逐渐被淘汰,所以选择了uploadfive完成上传 js文件和css文件自行下载,我上传了免费版(啃爹的官网竟然收费) 文件引入之后: <input type="file" id="sureLogo" value=""/> <a href="javascript:$('#sureLogo').uploadifive('upload')">上传</a> <a hre

数据恢复软件使用经验-支持U盘,手机SD卡,硬盘数据,解决图片恢复后打不开的问题

数据恢复软件使用经验-支持U盘,手机SD卡,硬盘数据,解决图片恢复后打不开的问题. 用过很多数据恢复软件,最早EasyRecovery pro,恢复过U盘,手机SD卡,硬盘数据.但现在下载不了最新版,而且BAIDU出来的都是国产收费软件假冒的,因为国产恢复软件都太差劲了,所以想偷梁换柱,不仅要收费,而且网上评论恢复效果也很差. 后来用过两款国外crack版的recuva和FinalData,效果也不错,但是有几次帮朋友恢复手机sd卡的时候,照片图片恢复后很多,打不开也不能预览.研究了很长时间,和

activemq 使用经验

activemq 使用经验   ActiveMQ 是apache的一个开源JMS服务器,不仅具备标准JMS的功能,还有很多额外的功能.公司里引入ActiveMQ后,ActiveMQ成里我们公司业 务系统中最重要的一个环节.所有应用都通过jms集成,如果ActiveMQ出了故障,整个系统就瘫痪了.因此,头对ActiveMQ的性能,可靠性,以 及如何正确使用,是非常的关心的,而我就被指派来做关于ActiveMQ的调研,本文对此做了些总结. 1 使用jms需要注意的问题 一下所述的问题,不仅是对Act

uploadifive上传文件

uploadifive是一个款基于H5的上传文件的插件.优点是,可以在PC端,也可以在手机上进行操作.缺点是,IE9以下的兼容性不好. View: 1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta name="viewport" content="width=device-width" /> 6 <title>Index</title> 7 <sc

node.js使用经验记录

MongoDB使用经验: 有时不知道MongoDB的错误码代表什么,那有这个链接: https://github.com/mongodb/mongo/blob/master/src/mongo/base/error_codes.err 关于MongoDB连接字符串,有两个经验: 对于node.js驱动,如果要保证一个用户的数据写入到数据库是按调用的顺序来的,请在连接字符串里设置poolSize=1或maxPoolSize=1. w=majority会导致性能很差,用w=1吧. Node.js本身

JTree用法及JTree使用经验总结&lt;转&gt;

JTree用法及JTree使用经验总结 import  java.awt.Dimension; import  java.awt.Color; import  javax.swing.JFrame; import  javax.swing.JPanel; import  javax.swing.JScrollPane; import  javax.swing.JTree; import  javax.swing.BoxLayout; import  javax.swing.tree.TreePa

myeclipse使用经验总结

0. 快捷键 ============================================================= 编辑: Ctrl+Shift+L显示所有快捷键 Ctrl+K参照选中的词(Word)快速定位到下一个 Ctrl+Shift+K参照选中的词(Word)快速定位到上一个 Ctrl+O快速显示OutLine Ctrl+T快速显示当前类的继承结构 Ctrl+Shift+X把选中文本全部改为大写 Ctrl+Shift+Y把选中文本全部改为小写 Ctrl+Shift+F

Unity3D使用经验总结 优点篇

09年还在和其它小伙伴开发引擎的时候,Unity3D就初露头角. 当时就对这种基于组件式的设计结构很不理解. 觉得拆分过于细致,同时影响效率. 而时至今日,UNITY3D已经成为了众多团队的首选3D引擎. 并且,随着Unity3D 4.3的发布,原生的2D支持也让人大开眼界.虽然Unity3d的原生2D功能还有很长的路要走,但也阻挡不了它称霸当下. 2011年中,公司的引擎项目停止之后,我的目光便转到了U3D的身上,经过几番挣扎后,终于对基于组件式的对象模型有了新的认识. 而如今,这种模式,成为