强大的jquery上传插件SWF版Uploadify参数详解

其他 2018-10-30 22:21:27 阅读次数: 0

强大的jquery上传插件SWF版Uploadify参数详解

说到Uploadify，不用说网络上很多人都在用，这可是个非常强大的上传插件，但遗憾的是的其html5版是收费的，5刀，需要的可以去其官方网站下载。屌丝的jQ酷只能讲下swf版了，这个是免费的，功能很强大，缺点就是不支持水果。

Uploadify内置了许多参数，方法，事件等，使用起来方便快捷，官方有详细的方档，当然都是英文的，嘻嘻。至于Uploadify有多强大，就不说了，亲自验证吧，本文讲解的Uploadify 3.2.1版，咱们就来详细的了解下各项参数吧。

jquery实例：Uploadify使用详解

  • 引入核心文件
<link rel="stylesheet" type="text/css" href="uploadify.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/jquery.uploadify-3.1.min.js"></script>
  • 构建html
<input type="file" name="file_upload" id="file_upload" />
  • 写入JS
$(function() {
    $('#file_upload').uploadify({
        'swf'      : 'uploadify.swf',// uploadify.swf 文件的相对JS文件的路径
        'uploader' : 'uploadify.php'//后台处理程序的相对路径
        // 更多的参数
    });
});
  • 基础的实例代码
<!DOCTYPE html>
<html>
<head>
    <title>My Uploadify Implementation</title>
    <link rel="stylesheet" type="text/css" href="uploadify.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $('#file_upload').uploadify({
            'swf'      : 'uploadify.swf',
            'uploader' : 'uploadify.php'
            // Your options here
        });
    });
    </script>
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
</body>
</html>

参数

  • auto:布尔类型，设置为true时，选择文件后将自动上传，设置为false则需要调用上传方法触发,以下为实例代码，下文就不写完整的代码了，亲们照着添加上去就可以了。
$(function() {
    $("#file_upload").uploadify({
        'auto' : true,
        'swf'         : '/uploadify/uploadify.swf',
        'uploader'    : '/uploadify/uploadify.php' 
    });
});
  • buttonClass：设置按钮的样式类，注意：样式的hover也设置下。
'buttonClass' : 'some-class',//自定义的样式类名
  • buttonCursor：默认值为hand，定义鼠标悬浮于按钮时的样式
'buttonCursor' : 'arrow',
  • buttonImage:默认值null，定义按钮的背景图片，同时需定义下按钮的CSS
<style type="text/css">
    .uploadify-button {
        background-color: transparent;
        border: none;
        padding: 0;
    }
    .uploadify:hover .uploadify-button {
        background-color: transparent;
    }
</style>
<input type="file" name="file_upload" id="file_upload" />

$(function() {
    $("#file_upload").uploadify({
        'buttonImage' : '/uploadify/browse-btn.png',
        'swf'         : '/uploadify/uploadify.swf',
        'uploader'    : '/uploadify/uploadify.php'
    });
});
  • buttonText：默认值SELECT FILES，定义按钮的文字
'buttonText' : '上传',
  • checkExisting：默认值false，定义后台检测文件是否存的程序，存在返回1，不存在返回0
'checkExisting' : '/uploadify/check-exists.php',
  • debug：布尔值，默认值false，如设置为true开始debug模式
'debug'    : true,
  • fileObjName：默认值Filedata，服务端调用的上传项的名称，以PHP为例，如果此项设置为the_files，那么在服务端获取时使用$_FILES[‘the_files’]。
'fileObjName' : 'the_files',
  • fileSizeLimit：限制上传文件的大小，默认单位KB，可以是B, KB, MB, or GB，设为0则不限制大小。
'fileSizeLimit' : '100KB',
  • fileTypeDesc：默认值：All Files，可选的文件类型，这个字符串出现在浏览文件对话框的文件类型下拉列表中。
'fileTypeDesc' : 'Image Files',
  • fileTypeExts:默认值.，定义可以上传的文件类型
'fileTypeDesc' : 'Image Files',
'fileTypeExts' : '*.gif; *.jpg; *.png',
  • formData：JSON类型，默认为Empty Object包含额外数据的JSON对象，在上传文件时通过POST或get方式发送给服务端。如PHP可通过[Math Processing Error]_POST 来获取。
'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},
  • height：默认30，单位像素，上传按钮的高度
'height'   : 50,
  • itemTemplate：默认值false，指定一个html模板给每个上传返回的数据，并添加上queue中。这里有个变量需设置
  • instanceID：Uploadify实例ID，fileID：加入到queue的文件ID，fileName：加入到queue的文件名,fileSize：加入到queue的文件大小。模板中变量这样使用${fileName}，具体代码如下
'itemTemplate' : '<div id="${fileID}" class="uploadify-queue-item">\
                    <div class="cancel">\
                        <a href="javascript:$(\'#${instanceID}\').uploadify(\'cancel\', \'${fileID}\')">X</a>\
                    </div>\
                    <span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\
                </div>'
  • method：默认值post，表单提交的方式。
'method'   : 'post',
  • multi：默认值true，是否允许多文件上传。
'multi'    : false,
  • overrideEvents：默认值Empty Array，接受一个JSON数组，把想重写的事件名称写到数组内即可进行重写。
'overrideEvents' : ['onUploadProgress'],
  • preventCaching：默认为true，为真时一个随机数将会添加上SWF文件的URL上，这样就不会被缓存。
'preventCaching' : false,
  • progressData：默认值percentage，上传数据时有queue显示的进度显示方式，两个类型percentage’ 和 ‘speed’.
'progressData' : 'speed',
  • queueID：默认值false，queue DOM元素的ID，如果设为false，将生成一个文件队列和queueID将被动态设置
<style type="text/css">
#some_file_queue {
    background-color: #FFF;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    height: 103px;
    margin-bottom: 10px;
    overflow: auto;
    padding: 5px 10px;
    width: 300px;
}
</style>
<div id="some_file_queue"></div>
<input type="file" name="file_upload" id="file_upload" />


$(function() {
    $("#file_upload").uploadify({
        'queueID'  : 'some_file_queue',
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php' 
    });
});
  • queueSizeLimit：默认值999，容纳文件队列的最大数
'queueSizeLimit' : 1,
  • removeCompleted：默认值true，设置为false时，queue显示的结果一直显示。
'removeCompleted' : false,
  • removeTimeout：默认值3，单位秒。文件上传完后延时隐藏queue队列。
'removeTimeout' : 10,
  • requeueErrors：默认值false，设为真时，上传出错时将返回错误信息，并再次重试上传。
$(function() {
    $("#file_upload").uploadify({
        'requeueErrors' : true,
        'swf'           : '/uploadify/uploadify.swf',
        'uploader'      : '/uploadify/not_here.php',
        'onUploadStart' : function(file) {
            console.log('Attempting to upload: ' + file.name);
        } 
    });
});
  • successTimeout：默认值30秒，文件上传完成时等待服务器响应的时间，之后显示成功信息。
'successTimeout' : 5,
  • swf：默认值uploadify.swf，uploadify.swf的相对路径。
'swf'      : '/uploadify/uploadify.swf',
  • uploader：后台处理程序的相对路径，默认值uploadify.php
'uploader' : '/uploadify/uploadify.php'
  • uploadLimit：默认值999，上传的最大文件数
'uploadLimit' : 1
  • width：默认值120，单位为像素，上传按钮的宽度
'width'    : 300

事件

  • onCancel：文件从队列中移除时触发
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('upload')">Upload Files</a>

$(function() {
    $("#file_upload").uploadify({
        'auto'     : false,
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'onCancel' : function(file) {
            alert('The file ' + file.name + ' was cancelled.');
        }
    });
});
  • onClearQueue：在cancel方法被传参“*”调用时触发
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('cancel','*');">Clear Queue</a>

$(function() {
    $("#file_upload").uploadify({
        'auto'         : false,
        'swf'          : '/uploadify/uploadify.swf',
        'uploader'     : '/uploadify/uploadify.php',
        'onClearQueue' : function(queueItemCount) {
            alert(queueItemCount + ' file(s) were removed from the queue');
        } 
    });
});
  • onDestroy：在调用 destroy方法时触发
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('destroy')">Destroy Uploadify</a>

$(function() {
    $("#file_upload").uploadify({
        'swf'       : '/uploadify/uploadify.swf',
        'uploader'  : '/uploadify/uploadify.php',
        'onDestroy' : function() {
            alert('I am getting destroyed!');
        }
    });
});

  • onDialogClose：在文件对话框关闭时触发。参数为一个对象queueData，内有5个参数：

    filesSelected，对话框中选中的文件数，

    filesQueued添加到队列的文件数，

    filesReplaced队列中被取代的文件数，

    filesCancelled添加到队列后被删除的文件数，

    filesErrored错误文件数

$(function() {
    $("#file_upload").uploadify({
        'fileSizeLimit'  : '50KB',
        'overrideEvents' : ['onDialogClose'],
        'swf'            : '/uploadify/uploadify.swf',
        'uploader'       : '/uploadify/uploadify.php',
        'onDialogClose'  : function(queueData) {
            alert(queueData.filesQueued + ' files were queued of ' + queueData.filesSelected + ' selected files. There are ' + queueData.queueLength + ' total files in the queue.');
        }
    });
});
  • onDialogOpen：在文件对话框打开时触发
<input type="file" name="file_upload" id="file_upload" />
<div id="message_box"></div>

$(function() {
    $("#file_upload").uploadify({
        'swf'          : '/uploadify/uploadify.swf',
        'uploader'     : '/uploadify/uploadify.php',
        'onDialogOpen' : function() {
            $('#message_box').html('The file dialog box was opened...');
        }
    });
});
  • onDisable：实例调用disable方法时触发
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('disable', true);">Disable Uploadify</a>

$(function() {
    $("#file_upload").uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'onDisable' : function() {
            alert('You have disabled Uploadify!');
        }
    });
});
  • onEnable：当Uploadify按钮激活并调用disable方法时触发
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('disable', false);">Enable Uploadify</a>

$(function() {
    $("#file_upload").uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'onEnable' : function() {
            alert('You can use Uploadify again.');
        }
    });
    $('#file_upload').uploadify('disable', true);
});
  • onFallback：当浏览器的FLASH版本不兼容时触发
$(function() {
    $("#file_upload").uploadify({
        'swf'        : '/uploadify/uploadify.swf',
        'uploader'   : '/uploadify/uploadify.php',
        'onFallback' : function() {
            alert('Flash was not detected.');
        }
    });
});
  • onInit：在Uploadify初始化后触发
$(function() {
    $("#file_upload").uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'onInit'   : function(instance) {
            alert('The queue ID is ' + instance.settings.queueID);
        }
    });
});
  • onQueueComplete：在文件队列完成时触发，传参数对象queueData，uploadsSuccessful成功传送的文件数量，uploadsErrored上传出错的文件数量。
$(function() {
    $("#file_upload").uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'onQueueComplete' : function(queueData) {
            alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
        }
    });
});
  • onSelect：当对话框的文件被选中时触发
$(function() {
    $("#file_upload").uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'onSelect' : function(file) {
            alert('The file ' + file.name + ' was added to the queue.');
        }
    });
});

  • onSelectError：选择文件出错时触发，此处有三个参数，

    file出错的文件对象。

    errorCode，错误代码：QUEUE_LIMIT_EXCEEDED，文件大小超出了推送到文件队列的限制值。FILE_EXCEEDS_SIZE_LIMIT文件大小超出了上传限制值。ZERO_BYTE_FILE，没大小的文件。INVALID_FILETYPE，文件类型符合。

    errorMsg：没有重写默认事件的情况下，可使用this.queueData.errorMsg返回详细的错误信息。

$(function() {
    $("#file_upload").uploadify({
        'fileSizeLimit' : '50KB',
        'swf'           : '/uploadify/uploadify.swf',
        'uploader'      : '/uploadify/uploadify.php',
        'onSelectError' : function() {
            alert('The file ' + file.name + ' returned an error and was not added to the queue.');
        }
    });
});
  • onSWFReady：Flash对象加载完成时触发
$(function() {
    $("#file_upload").uploadify({
        'swf'        : '/uploadify/uploadify.swf',
        'uploader'   : '/uploadify/uploadify.php',
        'onSWFReady' : function() {
            alert('The Flash file is ready to go.');
        }
    });
});

  • onUploadComplete：在每个文件上传完成时触发，无论成功还是出错。如果你想知道上传成功还是出错，请使用 onUploadSuccess和onUploadError 事件。

    file，无论成功还是错误的上传文件对象。

$(function() {
    $("#file_upload").uploadify({
        'swf'              : '/uploadify/uploadify.swf',
        'uploader'         : '/uploadify/uploadify.php',
        'onUploadComplete' : function(file) {
            alert('The file ' + file.name + ' finished processing.');
        }
    });
});

  • onUploadError：上传出错时触发，其速有4个参数：

    file：上传的文件对象

    errorCode：返回的错误代码

    errorMsg：返回的错误信息

    errorString：易读的详细错误信息

$(function() {
    $("#file_upload").uploadify({
        'swf'           : '/uploadify/uploadify.swf',
        'uploader'      : '/uploadify/uploadify-not-existing.php',
        'onUploadError' : function(file, errorCode, errorMsg, errorString) {
            alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
        }
    });
});

  • onUploadProgress：每次文件上传进度更新时触发，还有5个参数

    file：上传的文件对象

    bytesUploaded：已上传的文件字节数

    bytesTotal：文件的总字节数

    totalBytesUploaded：所有文件中当前已上传的总字节数

    totalBytesTotal：所有上传文件的总字节数

<input type="file" name="file_upload" id="file_upload" />
<div id="progress"></div>

$(function() {
    $("#file_upload").uploadify({
        'swf'              : '/uploadify/uploadify.swf',
        'uploader'         : '/uploadify/uploadify.php',
        'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
            $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');
        }
    });
});
  • onUploadStart：在文件上传之前触发
$(function() {
    $("#file_upload").uploadify({
        'swf'           : '/uploadify/uploadify.swf',
        'uploader'      : '/uploadify/uploadify.php',
        'onUploadStart' : function(file) {
            alert('Starting to upload ' + file.name);
        }
    });
});

  • onUploadSuccess：上传成功后触发，还3个参数

    file：上传成功的文件对象

    data：服务端返回的数据

    response：响应服务端返回的成功信息true，如返回false，则在successTimeout后呈现响应。

$(function() {
    $("#file_upload").uploadify({
        'swf'             : '/uploadify/uploadify.swf',
        'uploader'        : '/uploadify/uploadify.php',
        'onUploadSuccess' : function(file, data, response) {
            alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
        }
    });
});

方法

  • cancel：从队列中取消一个文件或文件的进度，带两个参数

    fileID：想取消的文件ID，可以输入任意数量的文件id作为参数。如果输入“*”作为第一个参数,队列中的所有文件将被取消。如果没有设置文件ID作为参数,在队列中第一个文件将被取消。

    suppressEvent：如果设置为真,那么onUploadCancel事件将被禁止。这在清除队列时很有用。

<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('cancel')">Cancel First File</a> | <a href="javascript:$('#file_upload').uploadify('cancel', '*')">Clear the Queue</a> | <a href="javascript:$('#file_upload').uploadify('upload', '*')">Upload the Files</a>

$(function() {
    $("#file_upload").uploadify({
        'auto'     : false,
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php'
    });
});
  • destroy：摧毁Uploadify实例，并返回上传文件到其原始状态
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('destroy')">Destroy Uploadify</a>
  • disable：禁用或启用上传按钮
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('disable', true)">Disable the Button</a> | <a href="javascript:$('#file_upload').uploadify('disable', false)">Enable the Button</a>

  • setting:返回或更新Uploadify实例的设置，三个参数：

    name：设置选项的名称，如果只设置了此名称则返回该名称的值

    value：设置选项的值

    resetObjects：设置为true时，将更新postData对象，并替换已有的值，否则新值将添加到现有的postData对象中

<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:changeBtnText()">Change the Button Text</a> | <a href="javascript:returnBtnText();">Read the Button</a>

$(function() {
    $("#file_upload").uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php'
    });
});

function changeBtnText() {
    $('#file_upload').uploadify('settings','buttonText','BROWSE');
}

function returnBtnText() {
    alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));
}
  • stop:停止当前的上传和文件队列的任何进度
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('upload', '*')">Upload the Files</a> | <a href="javascript:$('#file_upload').uploadify('stop')">Stop the Uploads!</a>

$(function() {
    $("#file_upload").uploadify({
        'auto'     : false,
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php'
    });
});

  • upload:上传特定文件或文件队列中的所有文件，参数

    fileID：你想上传的文件的ID，最简单的方法就是使用ID属性，如果‘*’作为第一个也是唯一一个传递参数,将上传队列中的所有文件。

<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('upload','*')">Upload Files</a>

$(function() {
    $("#file_upload").uploadify({
        'auto'     : false,
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php'
    });
});

关于自定义服务端的上传程序：

自定义服务端上传程序uploadify只需回返回一个字符串就OK了，如果上传成功就返回1，上传失败就返回错误信息。以下以thinkphp的上传类来说下。

public function upload(){
    $upload = new \Think\Upload();// 实例化上传类
    $upload->maxSize   =     3145728 ;// 设置附件上传大小
    $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
    $upload->rootPath  =     './Uploads/'; // 设置附件上传根目录
    $upload->savePath  =     ''; // 设置附件上传（子）目录
    // 上传文件 
    $info   =   $upload->upload();
    if(!$info) {// 上传错误提示错误信息
        echo($upload->getError());
    }else{// 上传成功
        echo(1);
    }
}

转载自：http://www.jqcool.net/jquery-uploadify.html

猜你喜欢

转载自blog.csdn.net/u010246789/article/details/52638168
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022