聊一聊jQuery插件uploadify使用方法

下面就为大家详细讲解“聊一聊jQuery插件uploadify使用方法”的完整攻略，希望能对大家有所帮助。

一、uploadify是什么

Uploadify是一个基于JQuery Javascript的文件上传插件。它使用了Flash技术和服务器端脚本进行文件上传操作。Uploadify可以为Web开发人员快速创建完整的上传功能，而无需编写冗长的Javascript代码来控制上传进度、上传文件的数量和大小、控制上传文件类型等。Uploadify过程中采用Flash技术，所以它可以提供更好的稳定性和可靠性。

二、uploadify的使用方法

1. 引入相关文件

引入uploadify的文件，包括css、js和Flash文件

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

2. 创建HTML元素和初始化uploadify

在HTML页面中添加一个input标签，并初始化uploadify插件

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

$(function() {
    $('#uploadify').uploadify({
        'swf': 'uploadify/uploadify.swf', //Flash文件路径
        'uploader': 'upload.php', //上传文件处理页面
        'auto': true, //选择文件后自动上传
        'multi': true, //允许同时上传多个文件
        'cancelImg': 'uploadify/uploadify-cancel.png', //取消按钮图片路径
        'fileTypeDesc': 'Image Files', //描述文件类型，例如“JPEG文件”
        'fileTypeExts': '*.jpg;*.jpeg;*.png;*.bmp',//允许的文件类型，多个之间用逗号分隔
        'fileSizeLimit': '2MB', //允许上传的最大文件大小
        'onUploadSuccess' : function(file, data, response) {//上传成功后的回调函数
            //data为服务器端返回的数据，格式为JSON格式
            var dataObj = JSON.parse(data);
            console.log(dataObj);
        }
    });
});

3. 编写服务器端处理页面

在上传文件处理页面upload.php中，需要对上传的文件进行处理。处理完成后，需要返回JSON格式的数据，告诉客户端上传结果等信息。

$success = move_uploaded_file($_FILES['Filedata']['tmp_name'], './uploads/' . $_FILES['Filedata']['name']);
if ($success) {
    $data = array('status' => 'success', 'filePath' => './uploads/' . $_FILES['Filedata']['name']);
} else {
    $data = array('status' => 'error', 'errorMsg' => '上传失败，请重试');
}
echo json_encode($data);

三、示例说明

示例1：上传成功后显示上传文件路径

当上传文件成功后，可以通过回调函数获取服务器端返回的JSON格式的数据。下面的示例演示了如何在控制台中显示上传文件路径。

$(function() {
    $('#uploadify').uploadify({
        'swf': 'uploadify/uploadify.swf',
        'uploader': 'upload.php',
        'auto': true,
        'multi': true,
        'cancelImg': 'uploadify/uploadify-cancel.png',
        'fileTypeDesc': 'Image Files',
        'fileTypeExts': '*.jpg;*.jpeg;*.png;*.bmp',
        'fileSizeLimit': '2MB',
        'onUploadSuccess' : function(file, data, response) {
            var dataObj = JSON.parse(data);
            console.log(dataObj.filePath);
        }
    });
});

示例2：限制上传文件数量和大小

Uploadify还可以通过设置参数来限制上传文件的数量和大小。下面的示例演示了如何设置每次最多上传3个文件，每个文件不得超过5MB。

$(function() {
    $('#uploadify').uploadify({
        'swf': 'uploadify/uploadify.swf',
        'uploader': 'upload.php',
        'auto': true,
        'multi': true,
        'cancelImg': 'uploadify/uploadify-cancel.png',
        'fileTypeDesc': 'Image Files',
        'fileTypeExts': '*.jpg;*.jpeg;*.png;*.bmp',
        'fileSizeLimit': '5MB',
        'queueSizeLimit': 3, //限制同时上传的文件数
        'onSelectError': function(file, errorCode, errorMsg) { 
            alert('文件[' + file.name + ']过大，请选择小于5MB的文件');
            return false;
        }
    });
});

四、总结

本文详细讲解了jQuery插件uploadify的使用方法，包括引入文件、创建HTML元素和初始化uploadify、编写服务器端处理页面和示例说明等。通过本文的学习，我们可以快速掌握uploadify的使用方法，为Web开发人员提供更好的帮助。