zoukankan      html  css  js  c++  java
  • Uploadify的用法

    从Uploadify 的下载页面上,可以看到当前的版本已经是Uploadify-v3.0.0 (Beta),但是还是一个Beta版,所以目前来说网站上的文档主要是针对 uploadify v2.14 的。所以这里就不多介绍老版本的文档了,主要说一下Uploadify3.0 的一些用法。

    Uploadify 的v3.0 和老版本还是有很大的差别的,虽然从演示上来看基本上一样,但是jquery调用uploadify的时候,一些很重要的参数名字都变了。在演示上的差 别,老版本是把按钮的样式放在flash里,而v3.0把按钮的样式和flash 分开了,定义起来更加自由。

    下面来说一下v3.0 的使用方法和有哪些参数上变化:

    使用方法:


    <html>
    <head>
    <link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="/uploadify/jquery-1.5.1.js"></script>
    <script type="text/javascript" src="/uploadify/swfobject.js"></script>
    <script type="text/javascript" src="/uploadify/jquery.uploadify.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#file_upload').uploadify({
    'uploader' : '/uploadify/uploadify.php',
    'swf' : '/uploadify/uploadify.swf',
    'cancelImage' : '/uploadify/uploadify-cancel.png',
    'auto' : true
    });
    });
    </script>
    </head>
    <body>
    <input id="file_upload" name="file_upload" type="file" />
    </body>
    </html>

    在页面中首先要uploadify 依赖的两个js 库:jquery 和 swfobject, 然后再加入从网上下载的 jquery.uploadify.js。 到目前为止,准备工作已经就绪,下面开始使用 jQuery.uploadify() 函数。传入指定的参数后,uploadify 就会按照你的要求来工作了。

    UPLOADIFY V3.0的参数详解

    下面的参数参数是必须的,当然插件也已经给他们赋上了必要的默认值

    id       : jQuery(this).attr('id'), // 根据页面上绑定的对象来给uploadify设置id
    swf      : 'uploadify.swf', // uploadify的上传功能是通过flash 来实现的,swf 是用来设置这个flash 的位置,这个flash 可以在下载的插件包里找到
    uploader : 'uploadify.php', // 这个参数是当文件上传完以后调用的PHP代码的地址

    下面的参数是可选的
    // Options
    auto : false,    // 设置选完文件是否自动上传
    buttonClass     : '', // 可以为按钮自定义样式
    buttonCursor    : 'hand', // 设置档鼠标移动到flash 上显示的图标
    buttonImage     : '1111.jpg', // 设置按钮的图片
    buttonText      : 'SELECT FILES', // 设置按钮上显示的文本
    cancelImage     : 'uploadify-cancel.png', // 设置取消按钮的图片
    checkExisting   : 'uploadify-check-existing.php', // 检查上传的文件时候已经存在
    debug           : false, // uploadify de调试程序是否开启
    fileObjName     : 'Filedata',
    fileSizeLimit   : 0, // 设置文件的上传的大小,0为无穷大
    fileTypeDesc    : 'All Files (*.*)',
    fileTypeExts    : '*.*', // 设置文件上传时的文件类型
    height          : 30, // 设置flash 的高度
    method          : 'post', // 设置提交的方法
    multi           : false, // 是否支付多文件一起上传
    queueID         : false, //
    queueSizeLimit  : 999,
    removeCompleted : true,
    removeTimeout   : 3,
    requeueErrors   : false,
    postData        : {}, // 设置上传是需要传入的参数
    preventCaching  : true,
    progressData    : 'percentage',
    // simUploadLimit  : 1, // Not possible with swfUpload
    successTimeout  : 30,
    transparent     : true,
    uploadLimit     : 999,
    uploaderType    : 'html5', // the other option is 'flash' // 设置上传组件的类型
    width           : 120, // 设置flash 的高度

    'onSelect': function(file)  
            {  
            alert(file.name+"---"+file.id);  
            },// 选择文件时触发的方法
            
            'onUploadError' : function(file, errorCode, errorMsg, errorString) {
                alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
            },//上传出错后的方法
            
            'onUploadSuccess' : function(file, data, response) {
                alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
            },//上传成功后的方法

  • 相关阅读:
    css透明度的兼容!!!
    csshtml布局及部分知识小分享~~~
    js面向对象选项卡
    JQ弹出框移动-插件分享~~~
    nginx配置phpcms v9伪静态规则 phpcms伪静态 404 Not Found
    mysql数据库常见优化方法
    帝国ECMS静态生成为一行代码/静态页面打乱教程
    帝国cms 批量删除或者清空classurl(二级域名绑定)
    jquery实现一个网页同时调用多个倒计时
    PHPCMSV9 单文件上传功能代码
  • 原文地址:https://www.cnblogs.com/interdrp/p/2942560.html
Copyright © 2011-2022 走看看