前端技术随笔

UploadiFive 使用文档与常用配置项（jQuery HTML5 文件上传）

H文和发布于 2024年 ·

字号

UploadiFive 是基于 jQuery 的 HTML5 文件上传插件，无需 Flash 即可在主流浏览器工作。下面整理最常用配置项与一个最小可用示例。

一、引入与基本结构

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

<input type="file" id="file_upload">
<a href="javascript:$('#file_upload').uploadifive('upload')">开始上传</a>

$(function() {
    $('#file_upload').uploadifive({
        "uploadScript": "/upload.php",
        "auto": false
    });
});

二、常用配置项

配置项	类型	默认值	说明
auto	Boolean	true	文件加入队列后是否自动上传
uploadScript	String	空	接收上传的服务器端地址（如 /upload.php）
buttonText	String	SELECT FILES	按钮显示文字，支持 HTML
buttonClass	String	空	追加到按钮上的 class
fileObjName	String	Filedata	服务端接收文件对象的字段名（PHP 中 $_FILES 的键）
fileType	String	.	允许的文件类型，如 ".jpg;.png"
fileSizeLimit	String	空	单个文件大小上限，如 "2MB"
multi	Boolean	true	是否允许选择多个文件
queueID	String	空	显示上传队列的容器 id
queueSizeLimit	Number	999	队列中最多文件数
uploadLimit	Number	999	最多可上传文件数
formData	JSON	空	随文件一起提交的其他参数
removeCompleted	Boolean	true	上传完成后是否从队列移除
checkScript	String	空	上传前检查同名文件的脚本地址
dnd	Boolean	true	是否允许拖拽上传

三、回调与事件

$('#file_upload').uploadifive({
    "uploadScript": "/upload.php",
    "onSelect": function(queue) { console.log('已选择 ' + queue.length + ' 个文件'); },
    "onUploadComplete": function(file, data) { console.log('上传完成', file.name, data); },
    "onError": function(file, errorCode, errorMsg) { console.log('出错', errorMsg); }
});

四、完整示例（带队列与限制）

$(function() {
    $('#file_upload').uploadifive({
        "auto": false,
        "dnd": true,
        "queueID": "queue",
        "uploadScript": "/upload.php",
        "fileType": "*.jpg;*.png;*.gif",
        "fileSizeLimit": "2MB",
        "multi": true,
        "buttonText": "选择图片",
        "onUploadComplete": function(file, data) { alert(file.name + ' 上传成功'); }
    });
});

<style>
#queue { border:1px solid #e5e5e5; border-radius:5px; height:178px; overflow:auto; padding:3px; width:300px; }
</style>
<div id="queue"></div>
<input type="file" id="file_upload">
<a href="javascript:$('#file_upload').uploadifive('upload')">开始上传</a>

五、后端接收（PHP 示例）

// upload.php
if (!empty($_FILES['Filedata'])) {
    move_uploaded_file($_FILES['Filedata']['tmp_name'], './/uploads/' . $_FILES['Filedata']['name']);
    echo 'ok';
}

注意字段名要与 fileObjName 对应，默认为 Filedata。