1. 首页
  2. 文章中心
  3. JS

强大的jquery上传插件SWF版Uploadify参数详解强大的jquery上传插件SWF版Uploadify参数详解转载自：http://www.jqcool.net/jquery-uploadify.html

77 阅读 0 评论
我是靠谱客的博主 洁净裙子，最近开发中收集的这篇文章主要介绍强大的jquery上传插件SWF版Uploadify参数详解强大的jquery上传插件SWF版Uploadify参数详解转载自：http://www.jqcool.net/jquery-uploadify.html，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

强大的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 ThinkUpload();// 实例化上传类
    $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

最后

以上就是洁净裙子为你收集整理的强大的jquery上传插件SWF版Uploadify参数详解强大的jquery上传插件SWF版Uploadify参数详解转载自：http://www.jqcool.net/jquery-uploadify.html的全部内容，希望文章能够帮你解决强大的jquery上传插件SWF版Uploadify参数详解强大的jquery上传插件SWF版Uploadify参数详解转载自：http://www.jqcool.net/jquery-uploadify.html所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(51)

相关文章

uploadify没反应
uploadify没反应
uploadify文件上传插件使用教程uploadify插件
uploadify文件上传插件使用教程uploadify插件
uploadify.swf多图上传
uploadify.swf多图上传
TypeError: swfuploadify is undefined
TypeError: swfuploadify is undefined
强大的jquery上传插件SWF版Uploadify参数详解强大的jquery上传插件SWF版Uploadify参数详解转载自：http://www.jqcool.net/jquery-uploadify.html
强大的jquery上传插件SWF版Uploadify参数详解强大的jquery上传插件SWF版Uploadify参数详解转载自：http://www.jqcool.net/jquery-uploadify.html
比较字符串
比较字符串
字符串
字符串
python第五次笔记
python第五次笔记

评论列表共有 0 条评论

立即
投稿
返回
顶部