Jquery上传插件 uploadify v3.1使用说明

简介

uploadify是一个基于jQuery的多文件异步上传插件，可以提供灵活的文件上传功能。本文将详细介绍uploadify的使用方法和基本配置。

下载和引入

首先，需要下载uploadify插件，可以在官方网站http://www.uploadify.com/下载。下载后将js、css和swf文件放入相应目录，并在HTML文件中引入。

<link rel="stylesheet" type="text/css" href="css/uploadify.css">
<script type="text/javascript" src="js/jquery.uploadify.min.js"></script>

基本配置

在页面中添加input标签，为上传按钮绑定上传事件，设置uploadify的基本配置参数。以下是上传单个文件的基本配置方法：

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

$(function() {
    $('#file_upload').uploadify({
        'swf' : 'swf/uploadify.swf', // 上传SWF文件路径
        'uploader' : 'upload.php', // 上传PHP路径
        'buttonText' : '选择文件', // 按钮文字
        'fileTypeDesc' : '选择文件', // 文件类型提示
        'fileTypeExts' : '*.*', // 允许上传文件类型
        'fileSizeLimit' : '2MB', // 文件大小限制
        'onUploadSuccess' : function(file, data, response) { // 上传成功回调方法
            alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
        },
        'onUploadError': function (file, errorCode, errorMsg, errorString) { // 上传错误回调方法
            alert('The file ' + file.name + ' could not be uploaded: ' + errorMsg);
        }
    });
});

以上代码中，uploadify的基本配置参数有：

• swf：uploadify.swf文件路径；
• uploader：上传处理PHP文件路径；
• buttonText：上传按钮文本；
• fileTypeDesc：文件类型提示语；
• fileTypeExts：允许上传的文件类型；
• fileSizeLimit：文件大小限制；
• onUploadSuccess：上传成功回调方法；
• onUploadError：上传错误回调方法。

文件队列

uploadify也可以上传多个文件，需要使用文件队列。以下是上传多个文件的基本配置方法：

<input type="file" name="file_upload" id="file_upload_multiple" multiple="true"/>

$(function() {
    $('#file_upload_multiple').uploadify({
        'swf'           : 'swf/uploadify.swf',
        'uploader'      : 'upload.php',
        'queueSizeLimit': 9999, // 队列大小限制
        'buttonText'    : '选择文件',
        'fileTypeDesc'  : '选择文件',
        'fileTypeExts'  : '*.*',
        'fileSizeLimit' : '2MB',
        'onQueueComplete': function(queueData) { // 队列上传完成后回调方法
            alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
        },
        'onSelectError': function (file, errorCode, errorMsg) { // 选择文件出错回调方法
            if (errorCode === SWFUpload.UPLOAD_ERROR.FILE_CANCELLED || errorCode === SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) {
                return;
            }
            switch (errorCode) {
                case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
                    alert(file.name + ' is empty, please select another file.');
                    break;
                case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
                    alert(file.name + ' is too large, please select a smaller file.');
                    break;
                case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
                    alert(file.name + ' is not an allowed file type.');
                    break;
                default:
                    alert('There was a problem with the upload. Please try again.');
                    break;
            }
        }
    });
});

以上代码中，新增的配置参数有：

• queueSizeLimit：文件队列限制；
• onQueueComplete：文件队列上传完成回调方法；
• onSelectError：选择文件出错回调方法。

示例

以下是一个简单的上传头像的示例：

<input type="file" name="avatar" id="avatar_upload"/>
<img id="preview"/>

$(function() {
    $('#avatar_upload').uploadify({
        'swf'           : 'swf/uploadify.swf',
        'uploader'      : 'upload.php',
        'buttonText'    : '选择头像',
        'fileTypeExts'  : '*.jpg;*.jpeg;*.png;*.gif',
        'fileSizeLimit' : '2MB',
        'auto'          : true,
        'onUploadSuccess': function(file, data, response) {
            $('#preview').attr('src', data);
        }
    });
});

以上代码中，设置了可上传的文件类型为.jpg、.jpeg、.png和.gif，文件大小限制为2MB，上传成功后将返回的文件路径设置为img标签的src属性，实现图片上传和预览的效果。

再来一个上传附件的简单示例：

<input type="file" name="attachment" id="attachment_upload"/>

$(function() {
    $('#attachment_upload').uploadify({
        'swf'           : 'swf/uploadify.swf',
        'uploader'      : 'upload.php',
        'buttonText'    : '选择附件',
        'fileSizeLimit' : '20MB',
        'auto'          : true,
        'onUploadSuccess': function(file, data, response) {
            alert('The file ' + file.name + ' was successfully uploaded to ' + data);
        }
    });
});

以上代码中，设置了文件大小限制为20MB，上传成功后弹出提示框显示上传成功的文件名和路径。

总结

本文简要介绍了uploadify的基本使用方法和配置参数，同时给出了两个简单的示例，希望能帮助大家更好地使用uploadify插件实现文件上传功能。