基于MVC4+EasyUI的Web开发框架之附件上传组件uploadify的使用

什么是uploadify

uploadify是一款基于jQuery的上传文件组件，使用uploadify可以方便地在网页中实现文件上传和管理功能。uploadify功能强大，支持多文件上传、拖拽上传、进度条显示、文件类型限制等特性。

如何使用uploadify

引入uploadify插件

在使用uploadify前需要先引入uploadify插件，可以从官方网站(http://www.uploadify.com/)下载最新版的uploadify插件，也可以直接从github上获取最新的源码。引入uploadify插件的方式通常是在HTML中引入对应的CSS和JS文件。

<!-- 引入uploadify的CSS文件 -->
<link rel="stylesheet" type="text/css" href="uploadify.css">

<!-- 引入jQuery和uploadify的JS文件 -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.uploadify.js"></script>

使用uploadify上传文件

使用uploadify上传文件的步骤如下所示：

1. 在HTML中添加一个input控件用于选择要上传的文件。
2. 创建一个div元素用于显示上传进度。
3. 初始化uploadify插件，并设定相关配置选项。
4. 处理上传成功或失败的回调函数。

<!-- HTML文件 -->

<!-- 用于选择要上传的文件 -->
<input type="file" id="file_upload" name="file_upload" />

<!-- 用于显示上传进度 -->
<div id="progress"></div>

<script type="text/javascript">
$(function() {
    // 初始化uploadify插件
    $('#file_upload').uploadify({
        'swf'      : 'uploadify.swf', //uploadify所需的flash文件
        'uploader' : 'upload.php',   //上传处理脚本的URL地址
        'buttonText' : '选择文件',   //按钮显示的文字
        'fileTypeExts' : '*.jpg;*.jpeg;*.gif;*.png',  //允许上传的文件类型
        'fileSizeLimit' : '2MB',     //允许上传的文件大小
        'multi' : true,              //支持多文件上传
        'onUploadStart' : function(file) {
            // 文件上传前动态添加参数（如session等）
            $('#file_upload').uploadify('settings','formData',{'username':'admin'});
        },
        'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
            // 显示上传进度
            $('#' + file.id).find('.progress-bar').css('width', parseInt(totalBytesUploaded / totalBytesTotal * 100) + '%');
        },
        'onUploadSuccess' : function(file, data, response) {
            // 处理上传成功后的回调函数
            alert('上传成功');
        },
        'onUploadError' : function(file, errorCode, errorMsg, errorString) {
            // 处理上传失败后的回调函数
            alert('上传失败');
        }
    });
});
</script>

使用uploadify上传整个文件夹

除了上传单个文件外，uploadify还支持上传整个文件夹的功能。要实现这个功能，需要在初始化uploadify插件时加入一个目录选择按钮，并在onSelect事件中处理选择文件夹的逻辑。

<!-- HTML文件 -->

<!-- 用于选择文件夹 -->
<input type="button" id="folder_select" value="选择文件夹" />

<!-- 用于显示上传进度 -->
<div id="progress" style="display:none;"></div>

<script type="text/javascript">
$(function() {
    // 初始化uploadify插件
    $('#folder_select').uploadify({
        'swf'      : 'uploadify.swf', //uploadify所需的flash文件
        'uploader' : 'upload.php',   //上传处理脚本的URL地址
        'buttonText' : '选择文件夹', //按钮显示的文字
        'fileTypeDesc' : '选择文件夹', //文件选择对话框的文件类型描述
        'fileTypeExts' : '*',       //允许选择的文件类型（这里选择所有类型的文件）
        'multi' : true,             //支持多文件上传
        'onSelect': function(){  
            // 在选择文件夹时显示上传进度
            $('#progress').show();  
        },
        'onUploadSuccess' : function(file, data, response) {
            // 处理上传成功后的回调函数
            alert('上传成功');
        },
        'onUploadError' : function(file, errorCode, errorMsg, errorString) {
            // 处理上传失败后的回调函数
            alert('上传失败');
        }
    });
});
</script>

uploadify的优点

1. 支持文件上传的进度条显示，可以方便地让用户了解上传的进展情况。
2. 支持多文件上传，实现多个文件的同时上传。
3. 支持文件类型限制和文件大小限制，有效避免上传非法文件或超大文件。
4. 支持整个文件夹上传，方便用户上传多个文件。

通过使用uploadify上传组件，可以方便地实现文件上传等相关功能，为Web开发带来了极大的便利。