SWFUpload多文件上传及文件个数限制的方法

本文旨在介绍如何使用SWFUpload组件实现多文件上传及文件个数限制的方法。对于需要实现这一功能的朋友来说，本文具有一定的参考价值。

SWFUpload是一个基于Flash和JavaScript技术的客户端文件上传组件，它能够帮助开发者实现强大的文件上传功能。

在实现多文件上传时，我们主要关注的是组件中一系列的事件处理函数。这些函数通过特定的顺序执行，构成了一个完整的文件上传流程。具体来说，这一过程包括以下几个主要阶段：

首先是文件入列队阶段（fileQueued）。当用户选择文件后，该文件将被添加到上传队列中。在这个阶段，我们可以对上传的文件进行一些基本的处理或验证。

接下来是选择文件阶段（fileDialogComplete）。当用户完成文件选择操作后，这个阶段会被触发。在这个阶段，我们可以获取用户选择的文件列表，并进行一些必要的处理。

然后是开始上传文件阶段（uploadStart）。在这个阶段，我们可以为每个文件启动上传进程。在这个阶段，我们还可以根据需要对上传的文件进行进一步的配置或调整。

接下来是上传处理阶段（uploadProgress）。在这个阶段，我们可以实时跟踪每个文件的上传进度，并展示给用户。这对于大型文件的上传过程来说尤为重要。

然后是上传成功阶段（uploadSuccess）。当文件成功上传后，这个阶段会被触发。在这个阶段，我们可以进行一些后续处理操作，比如更新文件列表等。

最后是上传完成阶段（uploadComplete）。当所有文件都上传完毕后，这个阶段会被触发。在这个阶段，我们可以进行一些总结性的处理操作，比如统计上传的总文件数等。值得注意的是，对于多个文件的上传过程来说，fileQueued和queueComplete只执行一次，而其他的阶段（如uploadSuccess和uploadComplete等）则会针对每个文件执行一次。

在实现多文件上传的过程中，我们还需要注意文件个数的限制问题。我们可以通过配置组件的相关参数来实现对上传文件个数的限制。这样可以避免用户一次性上传过多的文件，从而保证系统的稳定性和性能。

实现图片上传预览：从缩略图到删除功能

为了增强用户体验并实现图片上传的缩略图预览功能，我们采用了iframe的方式，类似于赶集的思路。在实现过程中，我们不仅要限制上传图片的数量，还要显示缩略图并为其生成删除按钮。

在父页面中，有一个用于显示缩略图的div（命名为`thumbImages`）。当图片上传成功后，服务器会返回一个包含缩略图地址和原图地址的数据格式，如：“suess|缩略图地址|原图地址”。我们以此数据为基础进行后续操作。

以下是关键功能的实现细节：

1. 图片上传成功处理函数（`uploadSuess`）：

当图片上传成功后，此函数首先服务器返回的数据。如果返回的不是“suess”，则设置上传进度为错误状态；否则，设置上传完成，并添加缩略图及其删除链接。这里的删除链接隐藏了一个触发删除操作的输入字段。

2. 添加缩略图函数（`addImage`）：

这个函数负责创建新的div来展示缩略图及其删除链接。每个div都包含一个小图片（img）元素和一个隐藏的输入字段（用于存储缩略图和原图地址）。这个div还有一个淡入效果，使图片展示更加生动。每次删除缩略图时都会更新已上传的文件数量。

关于上传文件数量的处理：

我们通过`queueComplete`函数来管理已上传的文件数量。每当文件上传完成时，这个函数会更新状态信息，告知用户还可以上传多少文件。在删除缩略图时，也会更新这个数量。需要注意的是，由于使用了iframe，我们在delDiv函数中不能直接使用this来引用SWFUpload实例（swfu）。这是使用iframe的一个特殊之处。整体效果通过更新DOM和JavaScript状态来展示给用户。

后台交互与前端整合：

当修改已上传的图片信息时，我们需要知道已经上传了多少图片。这可以通过PHP从后台获取已上传的图片路径，然后通过Smarty模板引擎将其传递给JavaScript数组（`img_arr`）。这样前端就可以知道已上传的图片列表，并进行相应的操作。我们也参考了SWFUpload的文档中的`flashReady()`事件函数，以确保我们的代码与框架完美整合。我们的目标是提供一个流畅、直观的图片上传体验，让用户能够轻松管理他们的图片。

为了响应这一事件，我们可以在设置中进行自定义，设置一个名为swfupload_loaded_handler的事件处理器。这个处理器在swfupload的settings里进行设定。

一旦swfupload_loaded事件被触发，我们的loaded函数就会被调用。如果在img_arr数组中有图片信息，我们就会遍历这个数组，并调用addImageFromDb函数处理每张图片。

下面是loaded函数的实现：

```javascript

function loaded() {

if (img_arr.length > 0) {

for (var val in img_arr) {

addImageFromDb(img_arr[val][0], img_arr[val][1], this);

}

}

}

```

在addImageFromDb函数中，我们首先获取SWFUpload的上传统计信息，然后增加已成功上传的图片数量，并更新统计信息。接着，我们通过DOM获取状态显示元素，更新已上传图片的数量以及还可以上传的图片数量。我们调用addImage函数添加图片。

以下是对addImageFromDb函数的详细实现：

```javascript

function addImageFromDb(src_s, src_b, swfu) {

var stats = swfu.getStats();

stats.successful_uploads++;

swfu.setStats(stats);

var status = document.getElementById("divStatus");

statusnerHTML = "已上传" + stats.successful_uploads + "张,还可以上传" + parseInt(swfu.settings['file_upload_limit'] - stats.successful_uploads) + "张";

addImage(src_s, src_b); // 这里假设addImage函数用于添加图片并生成缩略图

}

```

对于对JavaScript有更多兴趣的读者，我们推荐查看我们的专题文章，包括《JavaScript基础教程》、《JavaScript进阶实战》、《JavaScript性能优化》等等，希望这些资源能对大家的JavaScript程序设计有所帮助。

通过cambrian.render('body')将内容呈现到网页上。