logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

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

 蜗牛之窝 2016-09-27

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

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

jquery实例：Uploadify使用详解

引入核心文件

1
2
3
<link rel="stylesheet" type="text/css" href="uploadify.css" />
<script type="text/javascript" src="http://code./jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/jquery.uploadify-3.1.min.js"></script>

构建html

1
<input type="file" name="file_upload" id="file_upload" />

写入JS

1
2
3
4
5
6
7
$(function() {
    $('#file_upload').uploadify({
        'swf'      : 'uploadify.swf',// uploadify.swf 文件的相对JS文件的路径
        'uploader' : 'uploadify.php'//后台处理程序的相对路径
        // 更多的参数
    });
});

基础的实例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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-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则需要调用上传方法触发,以下为实例代码，下文就不写完整的代码了，亲们照着添加上去就可以了。

1
2
3
4
5
6
7
$(function() {
    $("#file_upload").uploadify({
        'auto' : true,
        'swf'         : '/uploadify/uploadify.swf',
        'uploader'    : '/uploadify/uploadify.php' 
    });
});

buttonClass：设置按钮的样式类，注意：样式的hover也设置下。

1
'buttonClass' : 'some-class',//自定义的样式类名

buttonCursor：默认值为hand，定义鼠标悬浮于按钮时的样式

1
'buttonCursor' : 'arrow',

buttonImage:默认值null，定义按钮的背景图片，同时需定义下按钮的CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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，定义按钮的文字

1
'buttonText' : '上传',

checkExisting：默认值false，定义后台检测文件是否存的程序，存在返回1，不存在返回0

1
 'checkExisting' : '/uploadify/check-exists.php',

debug：布尔值，默认值false，如设置为true开始debug模式

1
 'debug'    : true,

fileObjName：默认值Filedata，服务端调用的上传项的名称，以PHP为例，如果此项设置为the_files，那么在服务端获取时使用$_FILES['the_files']。

1
'fileObjName' : 'the_files',

fileSizeLimit：限制上传文件的大小，默认单位KB，可以是B, KB, MB, or GB，设为0则不限制大小。

1
'fileSizeLimit' : '100KB',

fileTypeDesc：默认值：All Files，可选的文件类型，这个字符串出现在浏览文件对话框的文件类型下拉列表中。

1
'fileTypeDesc' : 'Image Files',

fileTypeExts:默认值*.*，定义可以上传的文件类型

1
2
 'fileTypeDesc' : 'Image Files',
 'fileTypeExts' : '*.gif; *.jpg; *.png',

formData：JSON类型，默认为Empty Object包含额外数据的JSON对象，在上传文件时通过POST或get方式发送给服务端。如PHP可通过$_GET or $_POST 来获取。

1
 'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},

height：默认30，单位像素，上传按钮的高度

1
 'height'   : 50,

itemTemplate：默认值false，指定一个html模板给每个上传返回的数据，并添加上queue中。这里有的个变量需设置。

instanceID：Uploadify实例ID，fileID：加入到queue的文件ID，fileName：加入到queue的文件名,fileSize：加入到queue的文件大小。模板中变量这样使用${fileName}，具体代码如下

1
2
3
4
5
6
 '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，表单提交的方式。

1
 'method'   : 'post',

multi：默认值true，是否允许多文件上传。

1
 'multi'    : false,

overrideEvents：默认值Empty Array，接受一个JSON数组，把想重写的事件名称写到数组内即可进行重写。

1
 'overrideEvents' : ['onUploadProgress'],

preventCaching：默认为true，为真时一个随机数将会添加上SWF文件的URL上，这样就不会被缓存。

1
  'preventCaching' : false,

progressData：默认值percentage，上传数据时有queue显示的进度显示方式，两个类型percentage’ 和 ‘speed’.

1
 'progressData' : 'speed',

queueID：默认值false，queue DOM元素的ID，如果设为false，将生成一个文件队列和queueID将被动态设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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" />
1
2
3
4
5
6
7
$(function() {
    $("#file_upload").uploadify({
        'queueID'  : 'some_file_queue',
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php' 
    });
});

queueSizeLimit：默认值999，容纳文件队列的最大数

1
  'queueSizeLimit' : 1,

removeCompleted：默认值true，设置为false时，queue显示的结果一直显示。

1
'removeCompleted' : false,

removeTimeout：默认值3，单位秒。文件上传完后延时隐藏queue队列。

1
 'removeTimeout' : 10,

requeueErrors：默认值false，设为真时，上传出错时将返回错误信息，并再次重试上传。

1
2
3
4
5
6
7
8
9
10
$(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秒，文件上传完成时等待服务器响应的时间，之后显示成功信息。

1
'successTimeout' : 5,

swf：默认值uploadify.swf，uploadify.swf的相对路径。

1
 'swf'      : '/uploadify/uploadify.swf',

uploader：后台处理程序的相对路径，默认值uploadify.php

1
 'uploader' : '/uploadify/uploadify.php'

uploadLimit：默认值999，上传的最大文件数

1
 'uploadLimit' : 1

width：默认值120，单位为像素，上传按钮的宽度

1
'width'    : 300

事件

onCancel：文件从队列中移除时触发

1
2
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('upload')">Upload Files</a>
1
2
3
4
5
6
7
8
9
10
$(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方法被传参“*”调用时触发

1
2
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('cancel','*');">Clear Queue</a>
1
2
3
4
5
6
7
8
9
10
$(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方法时触发

1
2
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('destroy')">Destroy Uploadify</a>
1
2
3
4
5
6
7
8
9
$(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错误文件数

1
2
3
4
5
6
7
8
9
10
11
$(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：在文件对话框打开时触发

1
2
<input type="file" name="file_upload" id="file_upload" />
<div id="message_box"></div>
1
2
3
4
5
6
7
8
9
$(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方法时触发

1
2
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('disable', true);">Disable Uploadify</a>
1
2
3
4
5
6
7
8
9
$(function() {
    $("#file_upload").uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'onDisable' : function() {
            alert('You have disabled Uploadify!');
        }
    });
});

onEnable：当Uploadify按钮激活并调用disable方法时触发

1
2
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('disable', false);">Enable Uploadify</a>
1
2
3
4
5
6
7
8
9
10
$(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版本不兼容时触发

1
2
3
4
5
6
7
8
9
$(function() {
    $("#file_upload").uploadify({
        'swf'        : '/uploadify/uploadify.swf',
        'uploader'   : '/uploadify/uploadify.php',
        'onFallback' : function() {
            alert('Flash was not detected.');
        }
    });
});

onInit：在Uploadify初始化后触发

1
2
3
4
5
6
7
8
9
$(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上传出错的文件数量。

1
2
3
4
5
6
7
8
9
$(function() {
    $("#file_upload").uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'onQueueComplete' : function(queueData) {
            alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
        }
    });
});

onSelect：当对话框的文件被选中时触发

1
2
3
4
5
6
7
8
9
$(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返回详细的错误信息。

1
2
3
4
5
6
7
8
9
10
$(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对象加载完成时触发

1
2
3
4
5
6
7
8
9
$(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，无论成功还是错误的上传文件对象。

1
2
3
4
5
6
7
8
9
$(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：易读的详细错误信息

1
2
3
4
5
6
7
8
9
$(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：所有上传文件的总字节数

1
2
<input type="file" name="file_upload" id="file_upload" />
<div id="progress"></div>
1
2
3
4
5
6
7
8
9
$(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：在文件上传之前触发

1
2
3
4
5
6
7
8
9
$(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后呈现响应。

1
2
3
4
5
6
7
8
9
$(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事件将被禁止。这在清除队列时很有用。

1
2
<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>
1
2
3
4
5
6
7
$(function() {
    $("#file_upload").uploadify({
        'auto'     : false,
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php'
    });
});

destroy：摧毁Uploadify实例，并返回上传文件到其原始状态

1
2
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('destroy')">Destroy Uploadify</a>

disable：禁用或启用上传按钮

1
2
<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对象中

1
2
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(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:停止当前的上传和文件队列的任何进度

1
2
<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>
1
2
3
4
5
6
7
$(function() {
    $("#file_upload").uploadify({
        'auto'     : false,
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php'
    });
});

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

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

1
2
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('upload','*')">Upload Files</a>
1
2
3
4
5
6
7
$(function() {
    $("#file_upload").uploadify({
        'auto'     : false,
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php'
    });
});

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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参数详解

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 蜗牛之窝 > 《Javascript》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多