注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

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

表单 fishcity 4193浏览

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可通过$_GET or $_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);
    }
}

转载请注明:jQ酷 » 强大的jquery上传插件SWF版Uploadify参数详解

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。