jQuery无刷新上传之uploadify简单代码

研究无刷新批量文件上传功能有感，发现神奇的Uploadify插件

好久没和大家分享技术文章了，但我依然每天都会沉浸在技术园地里，学习、。最近，我在研究ajax无刷新上传的相关插件，之前使用SWFUpload实现了该功能，但总觉得不够完善。

昨天，我偶然发现了jQuery的Uploadify插件。在园子里虽然有几篇介绍这个插件的文章，但大多数是基于旧版本uploadify-v2.1.0的介绍。而我则从官网下载到了更新的uploadify-v3.1版本，其中的参数和调用方法都有所不同。幸好官网提供了详细的帮助文档。

（这个开发包是专门针对php的，官网没有提供.NET版本，但这并不影响我们理解其原理和进行相应修改。正如那句老话，“不仅要知其然，还要知其所以然”，掌握了本质，一切技术难题都会迎刃而解。）

接下来，让我们直接进入主题。废话不多说，先给大家看看使用Uploadify实现的无刷新上传效果图，让大家有个直观的感受：

一、从官网下载开发包并添加到项目中。我对这个开发包进行了精简，去除了与php相关的文件。

二、然后，添加对css和js文件的引用。

在引用文件时，需要注意jquery.js文件和uploadify.js文件的调用顺序。因为Uploadify是建立在jQuery基础之上的，所以必须先加载jQuery库文件，再加载Uploadify插件。这样就可以利用Uploadify强大的功能，实现无刷新批量文件上传。

三、Default.aspx页面的代码呈现

在网页的头部部分，我们看到了如下的代码：

``

``

引入了相关的CSS和JavaScript文件，包括uploadify的样式文件和jQuery库以及uploadify插件。紧接着，我们看到了一个JavaScript脚本部分，它使用jQuery对uploadify进行了配置。配置内容包括指定swf文件路径、后台处理页面、按钮文字、文件类型和大小限制等。其中，'auto'参数设为true表示选择文件后自动上传，'multi'参数设为true则允许多文件上传。

在body部分，我们看到了一个包含文件队列区域的div，以及一个文件上传的输入框。还有两个链接，用于触发上传和取消上传的操作。

四、一般处理程序UploadHandler.ashx的简要代码介绍

这个处理程序用于处理文件上传的请求。它设定了响应的内容类型为文本。然后，从请求中获取上传的文件以及其他可能的参数。接着，确定文件的保存路径，并检查上传的文件是否为空。如果不为空，就创建保存目录并将文件保存到指定路径，然后返回响应"1"。如果文件为空，则返回"0"。处理程序的一个属性IsReusable被设定为false。

五、参数介绍

通过查看jquery.uploadify-3.1.js中的默认设置并参考官方文档，我们可以了解到以下参数：

swfuploadify.swf 文件的相对路径：指定了上传功能所需的swf文件的路径。

uploader后台处理程序的相对路径：指定了处理上传文件的后台程序的路径。

buttonText按钮显示的文字：设置上传按钮上显示的文字。

上传文件的类型默认为所有文件：可以通过fileTypeDesc和fileTypeExts参数来指定允许上传的文件类型。

auto为true表示选择文件后自动上传：如果不想自动上传，可以通过提供的链接手动进行上传或取消上传操作。

multi设置为true将允许多文件上传。

method 提交方式默认为Post：可以选择Post或Get方式提交。

queueSizeLimit设置选择文件的个数：当允许多文件上传时，可以设置用户可以选择的文件数量。

其他更多设置可以参考官网的帮助文档。这段代码通过巧妙利用HTML、CSS和JavaScript技术，实现了文件的上传功能，并且通过后台处理程序对上传的文件进行处理和保存。在文件上传任务圆满完成时，Complete的显示将呈现中文面貌

对于许多使用上传功能的用户来说，当文件上传完成时，界面上显示的“Complete”字样是否以中文呈现，无疑是一个重要的细节。近期，我们注意到在特定版本的软件中，这一问题得到了解决。在深入研究后，我发现这一改变是通过修改源代码实现的。

深入查看jquery.uploadify-3.1.js文件，我找到了控制上传完成时显示内容的部分。通过参考官方文档，我发现可以在“onUploadSuess”事件中编写代码，以改变上传完成后的显示内容。修改后的代码如下：

// 当用户选择文件后自动启动上传

'auto': true,

// 允许多文件同时上传

'multi': true,

// 在文件成功上传后执行的代码

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

$('' + file.id).find('.data').html('上传完毕');

}

上述代码中，“onUploadSuess”事件会在文件成功上传后被触发，并会将上传区域的显示内容更改为“上传完毕”。这不仅可以提升用户体验，还能更直观地展示文件的上传状态。

还有一个重要的注意事项是文件类型的验证。在设定了文件上传路径后，我们通常只允许特定类型的文件被上传，例如.jpg、.png、.gif格式的图片。为了实现这一功能，除了在前端的参数设置（如fileTypeDesc和fileTypeExts）外，我们还需要在服务器端进行验证。这是因为恶意用户可能会绕过客户端验证，尝试上传不符合规定的文件。服务器端对文件扩展名的判断是非常必要的。

总结，本文详细介绍了如何通过修改代码实现上传完成后“Complete”显示的中文化，并强调了文件类型验证的重要性。希望这些内容对大家的学习有所帮助，同时也请大家多多支持我们的SEO工作。我们相信，只有持续优化用户体验和细节处理，才能为用户带来更好的体验。让我们一起努力，为狼蚁SEO注入更多活力！

Cambrian系统渲染完毕。