详解jQuery uploadify文件上传插件的使用方法

概述

jQuery uploadify是一个轻量级的文件上传插件，基于jQuery框架实现。它支持多文件上传、进度条显示、拖拽上传等功能，在前端实现文件上传功能非常方便。

安装

从jQuery uploadify官网（https://www.uploadify.com/）下载最新版本的插件，将其解压缩到项目目录下，并在HTML文件中引入相关的css和js文件，示例如下：

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

使用

基本用法

使用jQuery uploadify的基本用法非常简单，只需要在HTML文件中添加一个按钮，然后在JavaScript文件中使用uploadify方法即可实现文件上传功能，示例代码如下：

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

$(function() {
    $('#file_upload').uploadify({
        'swf': 'uploadify/uploadify.swf',
        'uploader': 'upload.php'
    });
});

在这个例子中，我们给页面添加了一个上传按钮，并使用了jQuery的uploadify方法来初始化该按钮。其中，swf和uploader参数分别表示uploadify.swf文件的路径和用于文件上传的服务器端脚本的路径。

其他用法

除了基本用法以外，jQuery uploadify还支持其他一些可选参数和回调函数，可以根据需要进行配置。常用的可选参数和回调函数包括：

可选参数：

buttonText：按钮上显示的文本。
width：按钮的宽度。
height：按钮的高度。
fileTypeExts：允许上传的文件类型。
fileSizeLimit：允许上传的最大文件大小。

回调函数：

onUploadStart：文件上传开始时的回调函数。
onUploadSuccess：文件上传成功时的回调函数。
onUploadError：文件上传失败时的回调函数。
onSelect：文件选择时的回调函数。

其中，回调函数可以用来实现上传文件前后的操作，例如在文件上传前进行验证，在文件上传成功后更新UI等。示例代码如下：

$(function() {
    $('#file_upload').uploadify({
        'swf': 'uploadify/uploadify.swf',
        'uploader': 'upload.php',
        'buttonText': '选择文件',
        'width': 80,
        'height': 20,
        'fileTypeExts': '*.jpg;*.png;*.gif',
        'fileSizeLimit': '2MB',
        'onUploadStart': function(file) {
            // 文件上传前的操作
            console.log('文件开始上传：' + file.name);
        },
        'onUploadSuccess': function(file, data, response) {
            // 文件上传成功后的操作
            console.log('文件上传成功：' + file.name);
            console.log('服务器返回数据：' + data);
        },
        'onUploadError': function(file, errorCode, errorMsg, errorString) {
            // 文件上传失败后的操作
            console.log('文件上传失败：' + file.name);
            console.log('错误代码：' + errorCode);
            console.log('错误信息：' + errorMsg);
            console.log('错误字符串：' + errorString);
        },
        'onSelect': function(file) {
            // 文件选择后的操作
            console.log('文件已选择：' + file.name);
        }
    });
});

示例说明

示例一

下面是一个基本的文件上传示例，可以将选择的文件上传到服务器端，服务器端返回上传结果并在页面上显示。HTML代码如下：

<input type="file" name="file_upload" id="file_upload"/>
<button type="button" id="start_upload">开始上传</button>

<div id="upload_result"></div>

JavaScript代码如下：

$(function() {
    $('#file_upload').uploadify({
        'swf': 'uploadify/uploadify.swf',
        'uploader': 'upload.php',
        'buttonText': '选择文件',
        'width': 80,
        'height': 20,
        'fileTypeExts': '*.jpg;*.png;*.gif',
        'fileSizeLimit': '2MB',
        'onUploadSuccess': function(file, data, response) {
            console.log('文件上传成功：' + file.name);
            console.log('服务器返回数据：' + data);

            var result = JSON.parse(data);
            var html = '<p>上传结果：' + result.status + '</p>';
            $('#upload_result').html(html);
        },
        'onUploadError': function(file, errorCode, errorMsg, errorString) {
            console.log('文件上传失败：' + file.name);
            console.log('错误信息：' + errorMsg);

            var html = '<p>上传结果：上传失败</p>';
            $('#upload_result').html(html);
        }
    });

    $('#start_upload').on('click', function() {
        $('#file_upload').uploadify('upload', '*');
    });
});

这个示例中，我们使用了uploadify方法初始化了上传按钮，添加了一个开始上传的按钮。点击开始上传按钮后，通过调用uploadify方法的upload函数来上传文件。服务器端返回的上传结果会在页面上显示。

示例二

下面是一个文件上传进度条示例，可以在上传文件时实时显示文件上传进度。HTML代码如下：

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

<div id="upload_process"></div>

JavaScript代码如下：

$(function() {
    $('#file_upload').uploadify({
        'swf': 'uploadify/uploadify.swf',
        'uploader': 'upload.php',
        'buttonText': '选择文件',
        'width': 80,
        'height': 20,
        'fileTypeExts': '*.jpg;*.png;*.gif',
        'fileSizeLimit': '2MB',
        'formData': {
            'timestamp': new Date().getTime(),
            'token': 'thisismytoken'
        },
        'onUploadProgress': function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
            var percent = totalBytesUploaded / totalBytesTotal * 100;
            $('#upload_process').css('width', percent + '%');
            $('#upload_process').html(percent + '%');
        }
    });
});

在这个示例中，我们使用了formData参数来传递一些自定义参数给服务器端脚本。然后，我们使用了onUploadProgress回调函数来实时更新文件上传进度条。每次上传进度变化后，我们将进度的百分比显示在页面上。