uploadify 是一个基于 jQuery 的文件上传插件，它能够让开发者实现简单高效的文件上传功能。在本文中，我们将介绍如何使用 uploadify 实现简单的文件上传。

一、安装 uploadify

上传文件前需要确保已成功加载 jQuery 和 uploadify 插件。接下来我们就来安装 uploadify。

1. 下载 uploadify 插件

在官网下载最新版的 uploadify 插件，并解压到项目中。

2. 添加必要的文件

将解压后文件拷贝到项目中，包括 js、css 和 swf 文件。

例如：

```html

```

3. HTML 代码

```html

```

这是最简单的 uploadify 代码，它只有一个文件上传区域。多文件上传将在后面进行讲解。

二、使用 uploadify

安装好了 uploadify 插件，我们还需要进行一些配置，才能实现文件上传的功能。其中包括：上传路径、上传文件格式、上传处理程序等。下面我们详细介绍。

1. 文件上传路径

在上传之前，需要配置上传路径。在 uploadify 中，我们可以使用 “uploader” 参数指定处理上传的服务器端脚本文件。

举例来说，如果你的处理上传文件的脚本文件是 “upload.php”，则需要将 “uploader” 参数设置为这个脚本文件的路径。代码如下：

```javascript

$('#file_upload').uploadify({

'swf': 'uploadify/uploadify.swf',

'uploader': 'upload.php',

// ...

});

```

2. 上传文件格式

在实际应用中，你可能需要限定上传文件类型。这时，可以使用 uploadify 插件提供的 “fileTypeExts” 参数，即文件类型。

例如，你只允许上传 jpg 和 png 格式的文件，可以这样设置：

```javascript

$('#file_upload').uploadify({

'swf': 'uploadify/uploadify.swf',

'uploader': 'upload.php',

'fileTypeExts': '*.jpg;*.png',

// ...

});

```

可以使用“*”通配符，指定多种文件类型。注意，使用 semicolon 分隔每个文件类型，不要用逗号或其它字符的，否则不能正确识别文件类型。

3. 处理上传文件

完成文件上传并不能满足业务功能的需求，还需要处理这些上传文件。上传文件的处理程序一般由服务器端语言实现。

例如，在 PHP 语言中，可以使用 $_FILES 数组来获取上传文件的相关信息。上传文件后的处理程序就可以根据用户选择的文件类型，保存在指定的目标位置。

常见上传文件的处理流程：

```php

if (!empty($_FILES)) {

$tempFile = $_FILES['Filedata']['tmp_name'];

$targetPath = $_SERVER['DOCUMENT_ROOT'] . '/uploads/';

$targetFile = $targetPath . $_FILES['Filedata']['name'];

move_uploaded_file($tempFile, $targetFile);

}

```

在上传文件处理程序之前，可以使用 “formData” 参数向服务器端提交其它参数。例如，上传图片时可能需要附加图片描述信息，这时可以将描述信息一起提交。

```javascript

$('#file_upload').uploadify({

'swf': 'uploadify/uploadify.swf',

'uploader': 'upload.php',

'fileTypeExts': '*.jpg;*.png',

'formData': {

'description': '这是一张图片'

},

// ...

});

```

需要注意的是，“formData”参数的使用必须依赖服务器端语言的处理，不同的语言处理可能不一样。

4. 多文件上传

除了单文件上传外，有时我们也需要支持多文件上传。在 uploadify 中，只需要将 “multi” 参数设置为 “true” 即可。

```javascript

$('#file_upload').uploadify({

'swf': 'uploadify/uploadify.swf',

'uploader': 'upload.php',

'fileTypeExts': '*.jpg;*.png',

'formData': {

'description': '这是一张图片'

},

'multi': true,

// ...

});

```

这样，用户就可以选择多个文件并上传到服务器了。文件上传后，服务器端处理程序也可以根据不同的文件类型进行处理。

这里需要注意，多文件上传的处理与单文件上传的处理不同，需要将 $_FILES 数组作为一个循环来生成处理程序。例如：

```php

if (!empty($_FILES)) {

foreach ($_FILES as $file) {

$tempFile = $file['tmp_name'];

$targetPath = $_SERVER['DOCUMENT_ROOT'] . '/uploads/';

$targetFile = $targetPath . $file['name'];

move_uploaded_file($tempFile, $targetFile);

}

}

```

5. 上传前准备

有时候我们需要在上传文件前对文件进行一些修改或验证操作，比如对图片进行裁剪、加水印或压缩等。

在 uploadify 中，我们可以使用 “onUploadStart” 事件来自定义上传前的处理操作，例如对单个文件进行限制。

```javascript

$('#file_upload').uploadify({

'swf': 'uploadify/uploadify.swf',

'uploader': 'upload.php',

'fileTypeExts': '*.jpg;*.png',

'formData': {

'description': '这是一张图片'

},

'multi': true,

'onUploadStart' : function(file) {

if ($.inArray(file.type, ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']) == -1) {

alert('只允许上传 JPG/PNG/GIF 格式文件！');

return false;

}

},

// ...

});

```

这里我们使用了 $.inArray 函数，来判断上传的文件类型是否在合法范围内。如果不在合法范围内，则阻止上传，并弹出提示信息。

6. 文件上传进度

在文件上传过程中，用户可能需要知道当前文件上传的进度情况。在 uploadify 中，我们可以使用 “onUploadProgress” 事件来实现。

```javascript

$('#file_upload').uploadify({

'swf': 'uploadify/uploadify.swf',

'uploader': 'upload.php',

'fileTypeExts': '*.jpg;*.png',

'formData': {

'description': '这是一张图片'

},

'multi': true,

'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {

var percent = (bytesUploaded / bytesTotal) * 100;

console.log(percent);

},

// ...

});

```

这样，我们就可以基于文件上传的字节数和总字节数来计算文件上传进度百分比，从而实现上传进度条的显示。

7. 文件上传完成

到目前为止，我们已经实现了上传文件的基本功能。但是，还有一些操作未完成。

例如，文件上传完成后需要进行页面跳转、提示上传完成信息等操作。因此，我们需要使用 “onUploadSuccess” 事件来实现这些操作。

```javascript

$('#file_upload').uploadify({

'swf': 'uploadify/uploadify.swf',

'uploader': 'upload.php',

'fileTypeExts': '*.jpg;*.png',

'formData': {

'description': '这是一张图片'

},

'multi': true,

'onUploadSuccess' : function(file, data, response) {

console.log(data);

},

// ...

});

```

8. 取消文件上传

在文件上传过程中，用户可能需要取消上传。在 uploadify 中，我们可以使用 “cancel” 方法将当前正在上传的文件取消。

```javascript

$('#file_upload').uploadify({

'swf': 'uploadify/uploadify.swf',

'uploader': 'upload.php',

'fileTypeExts': '*.jpg;*.png',

'formData': {

'description': '这是一张图片'

},

'multi': true,

'onCancel' : function(file) {

console.log(file.name + ' 取消上传');

},

'onUploadError' : function(file, errorCode, errorMsg, errorString) {

console.log(file.name + ' 上传失败: ' + errorMsg);

},

// ...

});

// 取消上传

$('#file_upload').uploadify('cancel', '*');

```

当然，你可以将 “cancel” 方法绑定到其他元素上，例如一个按钮，这样用户就可以随时取消上传。

总结

在本文中，我们介绍了如何使用 uploadify 实现简单的文件上传。借助 uploadify 插件，我们可以在很短的时间内实现简单高效的文件上传功能。

当然，使用 uploadify 进行文件上传还有很多其它方面的操作和需求，需要结合实际场景进行调整和拓展。我们希望本文对大家有所帮助，有兴趣的同学可以继续深入了解，发掘更多有用的功能。