使用MVC4+EasyUI与Uploadify实现附件上传

本文档详细介绍了如何在ASP.NET MVC4框架下，结合EasyUI前端库，使用上传组件Uploadify实现附件上传功能。 在ASP.NET编程中，开发Web应用时经常需要处理用户上传的文件，例如附件。Uploadify是一款基于jQuery的Flash插件，允许在不刷新页面的情况下进行文件上传，并提供了进度条显示，提高了用户体验。为了使用Uploadify，开发者首先需要确保用户的浏览器安装了Adobe Flash插件，因为Uploadify依赖于Flash来实现无刷新上传。 Uploadify有两个版本：基于Flash的免费版和基于HTML5的收费版。在本文档中，我们将使用免费的Flash版，版本号为v3.2.1。在使用Uploadify前，必须引入jQuery库，因为Uploadify是构建在jQuery基础上的。如果使用的是基于EasyUI的Web开发框架，通常EasyUI已经包含了jQuery库，如以下代码所示： ```html <script type="text/javascript" src="~/Content/JqueryEasyUI/jquery.min.js"></script> ``` 接下来，需要添加Uploadify的JavaScript和CSS文件，以便在页面上启用uploadify控件。这包括`jquery.uploadify.js`脚本和`uploadify.css`样式表。添加这些文件后，可以按照Uploadify的文档和示例配置上传参数，创建上传按钮，并定义上传完成后或错误时的回调函数，以处理服务器端返回的结果。 在ASP.NET MVC4中，需要在控制器中创建对应的Action来接收并处理上传的文件。例如，创建一个名为`UploadFile`的Action，它可能接收`HttpPostedFileBase`类型的参数，用来存储上传的文件。然后，可以将文件保存到服务器的特定目录，或者进行其他处理，比如保存到数据库。 同时，为了确保上传的安全性，需要对上传的文件类型和大小进行限制。可以通过配置Uploadify的选项来设置最大文件大小、允许的文件类型等。例如： ```javascript $("#fileInput").uploadify({ 'swf': '/Scripts/uploadify.swf', 'uploader': '/Home/UploadFile', 'fileTypeDesc': 'Image Files', 'fileTypeExts': '*.jpg;*.jpeg;*.png;*.gif;', 'sizeLimit': 1048576, // 1MB 'onUploadSuccess': function(file, data, response) { // 上传成功后的处理逻辑 }, 'onError': function(event, ID, fileObj, errorObj) { // 上传失败的处理逻辑 } }); ``` 在上述配置中，`uploader`属性指定了服务器端处理文件上传的Action，`fileTypeExts`定义了允许的文件扩展名，`sizeLimit`设定了文件大小限制，而`onUploadSuccess`和`onError`则是回调函数，分别在文件上传成功和失败时执行。 要在ASP.NET MVC4+EasyUI环境中使用Uploadify，需遵循以下步骤： 1. 确保浏览器支持Flash。 2. 引入jQuery和Uploadify的JavaScript及CSS文件。 3. 在HTML中创建用于选择文件的input元素，并为其附加uploadify初始化配置。 4. 在控制器中创建处理文件上传的Action。 5. 配置Uploadify的选项，限制文件类型和大小，以及定义上传事件的回调函数。 6. 实现服务器端的文件处理逻辑，如保存文件或验证文件内容。 通过以上步骤，开发者可以构建一个高效且用户友好的文件上传功能，提高Web应用的交互体验。