uploadifive详解

发布时间：2023-05-20

一、uploadifive介绍

uploadifive是一款基于jQuery的开源文件上传插件，可以将文件快速上传到服务器。相比较其他文件上传插件，uploadifive具有过程可视化、上传进度条、文件队列等特点。除了可以上传文件外，还支持取消上传、上传前的自定义验证、上传完成后的回调等功能。 以下是一个简单的uploadifive文件上传示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>uploadifive示例</title>
    <script src="jquery.min.js"></script>
    <script src="jquery.uploadifive.min.js"></script>
    <link rel="stylesheet" type="text/css" href="uploadifive.css">
</head>
<body>
    <input type="file" name="file_upload" id="file_upload">
    <script>
        $('#file_upload').uploadifive({
            'uploadScript' : 'upload.php', // 上传地址
            'buttonText'   : '选择文件', // 按钮文本
            'fileSizeLimit': '2MB', // 文件大小限制
            'uploadLimit'  : 5, // 单次上传数量限制
            'queueSizeLimit' : 10, // 文件队列数量限制
            'onUploadComplete' : function(file, data) { // 上传完成回调函数
                console.log(file.name + ' 上传成功！');
            }
        });
    </script>
</body>
</html>

二、上传前的验证

在上传文件之前，通常需要对文件进行验证，比如判断文件大小、类型等是否符合要求。uploadifive提供了一个回调函数，可以在上传之前对文件进行验证。 以下是通过回调函数进行文件验证的示例：

<script>
    $('#file_upload').uploadifive({
        'uploadScript' : 'upload.php',
        'buttonText'   : '选择文件',
        'fileSizeLimit': '2MB',
        'uploadLimit'  : 5,
        'queueSizeLimit' : 10,
        'onUploadComplete' : function(file, data) {
            console.log(file.name + ' 上传成功！');
        },
        'onUploadStart' : function(file) { // 上传前的回调函数
            if (!(/\.(jpg|jpeg|png|gif)$/i).test(file.name)) { // 限制文件类型为jpg、png、gif
                alert('只能上传图片文件！');
                return false;
            }
            if (file.size > 2 * 1024 * 1024) { // 限制文件大小为2MB
                alert('文件大小超出限制！');
                return false;
            }
        }
    });
</script>

三、上传进度条

uploadifive支持上传进度条，可以让用户清楚地看到文件上传的进度。进度条的样式可以通过自定义CSS进行修改。 以下是添加上传进度条的示例：

<link rel="stylesheet" type="text/css" href="uploadifive.css">
<script>
    $('#file_upload').uploadifive({
        'uploadScript' : 'upload.php',
        'buttonText'   : '选择文件',
        'fileSizeLimit': '2MB',
        'uploadLimit'  : 5,
        'queueSizeLimit' : 10,
        'onUploadComplete' : function(file, data) {
            console.log(file.name + ' 上传成功！');
        },
        'onProgress' : function(file, e) { // 上传过程中的回调函数
            var percent = Math.round((e.loaded / e.total) * 100); // 计算上传进度
            $('#file_upload').find('.uploadifive-progress .progress-bar').css('width', percent + '%'); // 设置进度条长度
        }
    });
</script>

四、文件队列

uploadifive支持文件队列，可以让用户清楚地看到当前上传的文件情况。文件队列的样式可以通过自定义CSS进行修改。 以下是添加文件队列的示例：

<link rel="stylesheet" type="text/css" href="uploadifive.css">
<script>
    $('#file_upload').uploadifive({
        'uploadScript' : 'upload.php',
        'buttonText'   : '选择文件',
        'fileSizeLimit': '2MB',
        'uploadLimit'  : 5,
        'queueSizeLimit' : 10,
        'onUploadComplete' : function(file, data) {
            console.log(file.name + ' 上传成功！');
        },
        'onProgress' : function(file, e) {
            var percent = Math.round((e.loaded / e.total) * 100);
            $('#file_upload').find('.uploadifive-progress .progress-bar').css('width', percent + '%');
        },
        'onAddQueueItem' : function(file) { // 添加文件到队列时的回调函数
            $('#file_upload_queue').append('<div class="uploadifive-queue-item"><span class="uploadifive-queue-item-name">' + file.name + '</span><span class="uploadifive-queue-item-size">' + Math.round(file.size / 1024) + 'KB</span></div>');
        },
        'onUpload' : function(filesToUpload) { // 开始上传时的回调函数
            $('#file_upload_queue').find('.uploadifive-queue-item').addClass('processing');
        },
        'onUploadComplete' : function(file, data) {
            $('#file_upload_queue').find('.uploadifive-queue-item.processing').remove();
        }
    });
</script>
<div id="file_upload_queue"></div>

五、取消上传

uploadifive支持取消上传，可以让用户取消正在上传的文件。取消上传的文件可以从文件队列中移除。 以下是添加取消上传功能的示例：

<link rel="stylesheet" type="text/css" href="uploadifive.css">
<script>
    $('#file_upload').uploadifive({
        'uploadScript' : 'upload.php',
        'buttonText'   : '选择文件',
        'fileSizeLimit': '2MB',
        'uploadLimit'  : 5,
        'queueSizeLimit' : 10,
        'onUploadComplete' : function(file, data) {
            console.log(file.name + ' 上传成功！');
        },
        'onProgress' : function(file, e) {
            var percent = Math.round((e.loaded / e.total) * 100);
            $('#file_upload').find('.uploadifive-progress .progress-bar').css('width', percent + '%');
        },
        'onAddQueueItem' : function(file) {
            $('#file_upload_queue').append('<div class="uploadifive-queue-item" id="' + file.id + '"><span class="uploadifive-queue-item-name">' + file.name + '</span><span class="uploadifive-queue-item-size">' + Math.round(file.size / 1024) + 'KB</span><span class="uploadifive-queue-item-cancel">取消</span></div>');
            $('#' + file.id + ' .uploadifive-queue-item-cancel').click(function() { // 点击取消按钮时取消上传
                var cancelled = $('#file_upload').uploadifive('cancel', file.id); // 取消上传
                if (cancelled) { // 移除文件队列中的文件
                    $('#' + file.id).remove();
                }
            });
        },
        'onUpload' : function(filesToUpload) {
            $('#file_upload_queue').find('.uploadifive-queue-item').addClass('processing');
        },
        'onUploadComplete' : function(file, data) {
            $('#file_upload_queue').find('.uploadifive-queue-item.processing').remove();
        }
    });
</script>
<div id="file_upload_queue"></div>
推荐文章