首页 > 编程笔记 > JavaScript笔记 阅读：22

jQuery uploadify插件用法详解（附带实例）

uploadify 插件是一款来自国外的优秀第三方 jQuery 插件。它是基于 JavaScript 内的 jQuery 库编写的，结合了 AJAX 和 Flash，实现了多线程上传文件的功能。

uploadify 插件提供的功能主要包括：
下面简单介绍 uploadify 插件的属性、方法和事件。

uploadify插件的属性

uploadify 插件的常用属性及说明如下表所示。

表：uploadify 插件的常用属性及说明
属性 说明
auto 是否自动上传
buttonClass 上传按钮样式
buttonText 上传按钮文本
checkScript 检查目标文件夹中是否存在与上传文件同名的文件
dnd 是否允许拖放
dropTarget 投放目标选择器
fileObjName 定义服务器接收参数名称
fileSizeLimit 上传文件的大小限制，该属性值为 0 则表示无限制
fileType 允许上传的文件类型。要允许所有文件类型，则设置该属性值为 false；允许特定文件类型，则设置该属性值为 ['image/jpeg','video/*']
formData 提交给服务器端的参数
width 上传按钮宽度
height 上传按钮高度
itemTemplate 队列中项目的 HTML 标记
method 上传文件的提交方法，取值 post 或 get
multi 是否允许多文件上传
overrideEvents 指定多个插件默认事件中的事件，被指定的事件将不会执行
queueID 指定用于显示上传队列的父级元素 id 属性值
queueSizeLimit 限制每次选择上传文件的个数
removeCompleted 文件上传完毕后，是否从上传队列中移除
simUploadLimit 一次可上传的文件数量
truncateLength 指定文件名称的截取长度，设置该属性值后，文件名称超过指定长度将会被截取
uploadLimit 指定允许上传的最大文件数量
uploadScript 上传处理脚本

可以根据下表中列出的属性对常用 uploadify 对插件进行相应的设置，代码如下： 
$(document).ready(function() {
  $("#uploadify").uploadify({
    'uploadScript': 'uploadifive.php',      // 上传处理脚本
    'fileObjName': 'fileData',              // 定义服务器接收参数名称
    'method': 'post',                       // 上传文件的提交方法，取值 post 或 get
    'formData': { "imgType": "normal" },    // 提交给服务器端的参数
    'checkScript': '/Home/Check',           // 检查目标文件夹中是否存在与上传文件同名的文件
    'auto': false,                          // 是否自动上传
    'multi': true,                          // 是否允许多文件上传
    'width': 200,                           // 上传按钮宽度（单位：px）
    'height': 50,                           // 上传按钮高度（单位：px）
    'buttonText': '请选择文件',              // 上传按钮文本
    'buttonClass': false,                   // 上传按钮样式
    'dnd': true,                            // 是否允许拖放
    'removeCompleted': false,               // 文件上传完毕后，是否从上传队列中移除
    'queueID': false,                       // 指定用于显示上传队列的父级元素 id 属性值
    'fileType': 'image/jpeg',               // 允许上传的文件类型。要允许所有文件类型，则设置该属性值为 false；允许特定文件类型，则设置该属性值为 ['image/jpeg', 'video/*']
    'truncateLength': 0,                    // 指定文件名称的截取长度，设置该属性值后，文件名称超过指定长度将会被截取
    'fileSizeLimit': '200MB',               // 上传文件的大小限制，该属性值为 0 则表示无限制
    'uploadLimit': 20,                      // 指定允许上传的最大文件数量
    'simUploadLimit': 0,                    // 一次可上传的文件数量
    'queueSizeLimit': 20                    // 指定上传文件的个数
  });
});

uploadify插件的方法

uploadify 插件的常用方法及说明如下表所示。

表：uploadify插件的常用方法及说明
方法 说明
clearQueue() 清除文件队列
cancel() 取消文件上传
upload() 上传文件
destroy() 销毁上传实例
debug() 输出 debug 日志

uploadify插件的事件

uploadify 插件的常用事件及说明如下表所示。

表：uploadify 插件的常用事件及说明
事件 说明
onInit 在 uploadify 插件初始化结束时触发该事件
onFallback 验证客户端浏览器是否兼容
onCheck 验证客户端文件是否存在
onError 验证客户端设定的约束
onSelect 在每添加一个文件至上传队列时触发该事件
onDrop 在文件被添加到该队列文件时触发该事件
onProgress 在上传进度更新时触发该事件
onAddQueueItem 在文件被添加到上传队列时触发该事件
onUpload 在执行上传操作时触发该事件
onUploadFile 在上传每一个文件时触发该事件
onUploadComplete 在文件上传完成后触发该事件
onQueueComplete 在队列中的所有文件上传完成时触发该事件
onCancel 在上传被取消时触发该事件
onClearQueue 在清空队列时触发该事件
onDestroy 在 uploadify 插件被销毁时触发该事件

【实例】使用 uploadify 插件实现批量上传文件的功能。由于使用 uploadify 插件上传文件时，需要一个服务器端文件来接收上传的文件，因此需要使用网页编程语言编写一个服务器端文件，本实例中使用 PHP 作为编写服务器端文件的网页编程语言。

程序开发步骤如下：
1) 创建新项目，默认主页为 index.php。

2) 在 index.php 的 HTML 代码中引入 jQuery 框架和 uploadify 插件所需的 JavaScript 脚本文件及 CSS 样式文件，代码如下： 
<script type="text/javascript" src="js/jquery-3.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.uploadify-3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css"/>

3) 在 index.php 页面中添加一个 file 控件，id 属性值设置为 file_upload，用于选择文件，再添加一个上传按钮，代码如下： 
<h1>Uploadify HTML5 上传</h1>
<form>
  <div id="queue"></div>
  <input id="file_upload" name="file_upload" type="file" multiple="true">
  <a style="position: relative; top: 8px;" href="javascript:$('#file_upload').uploadifive('upload')">上传</a>
</form>

4) 在 <head></head> 中编写代码，实现在页面加载后初始化 uploadify 插件，并设置插件的相关属性，其中包括上传文件类型、上传文件大小、是否可以选择多个文件上传以及是否自动上传等，通过设置这些属性可以非常灵活地控制文件上传。代码如下： 
$(function() {
  $('#file_upload').uploadifive({
    'buttonText' : '选择文件',                       // 设置上传按钮文本
    'auto'       : false,
    'checkScript': 'check-exists.php',
    'fileType'   : '.jpg,.jpeg,.gif,.png',
    'formData'   : {
                    'timestamp' : '<?php echo $timestamp;?>',
                    'token'     : '<?php echo md5("unique_salt" . $timestamp);?>'
                   },
    'queueID'    : 'queue',
    'uploadScript': 'uploadifive.php',
    'onUploadComplete' : function(file, data) {
                            console.log(data);
                         }
  });
});

5) 处理文件上传的 uploadify 插件的 PHP 文件代码如下： 
<?php
/*
UploadiFive
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
*/
// Set the upload directory
$uploadDir = '/uploads/';
// Set the allowed file extensions
$fileTypes = array('jpg', 'jpeg', 'gif', 'png'); // Allowed file extensions

$verifyToken = md5('unique_salt' . $_POST['timestamp']);

if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
    $tempFile   = $_FILES['Filedata']['tmp_name'];
    $uploadDir  = $_SERVER['DOCUMENT_ROOT'] . $uploadDir;
    $targetFile = $uploadDir . $_FILES['Filedata']['name'];

    // Validate the filetype
    $fileParts = pathinfo($_FILES['Filedata']['name']);
    if (in_array(strtolower($fileParts['extension']), $fileTypes)) {
        // Save the file
        move_uploaded_file($tempFile, $targetFile);
        echo 1;
    } else {
        // The file type wasn't allowed
        echo 'Invalid file type.';
    }
}
?>
实例运行效果如下图所示：


图 1 uploadify 插件的使用

相关文章