MVC4+Jquery对话框中使用Uploadify上传文件

http://www.uploadify.com/download/ 可以下载最新的uploadify插件，最新的版本为3.2.1

uploadify中可提前判断文件的大小，也能检测文件类型，解决了纯js在ie8下除非用ActiveXObject才能获取文件的大小的问题

    var fileobject = new ActiveXObject("Scripting.FileSystemObject"); //获取上传文件的对象  
    var file = fileobject.GetFile(filePath); //获取上传的文件  
    var filerealSize = file.Size;

ActiveXObject每次都需要用户点击是否允许不安全的应用之类的，对用户不够友好。Firefox可以直接取到文件的filesize大小，为了兼容都采用flash方法

html头中加入相关的的css和js文件

<link href="../../themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="../../themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/uploadify-v3.2.1/uploadify.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
<script src="../../Scripts/uploadify-v3.2.1/jquery.uploadify.js" type="text/javascript"></script>

html描述：

<div>
   <input type="button" id="UploadBtn" value="上传文件" name="UploadBtn" οnclick="UploadFunc()"/>
</div>
<div id="DialogID" style="display:none">
    <input type="file" id="file_upload" name="file_upload" />
</div>

js代码：

<script type="text/javascript">

    function UploadFunc() {
        $('#file_upload').uploadify({
            'buttonText': '选择上传文件',
            'swf': '@Url.Content("~/Scripts/uploadify-v3.2.1/uploadify.swf")',
            'uploader': '/Home/Upload',
            'removeCompleted': true,
            'checkExisting': true,
            'fileTypeDesc': 'PDF文件',
            'fileTypeExts': '*.pdf',
            'fileSizeLimit': '30MB',
            'auto': true,
            'onQueueComplete': function () {
                $('#file_upload').uploadify('destroy'); //此处必须要将flash的对象destroy，否则再次打开对话框时会报错
                $("#DialogID").dialog('close');
            }
        });

        $("#DialogID").dialog({
            height: 300,
            width: 500,
            title: "上传文件",
            modal: true,
            resizable: false
        });
    }
</script>

其中使用uploadify的参数就不再进行详述，其中参数'swf'，'uploader'是必须的，若要指定uploadify的具体样式，需要修改uploadify.css文件

若要修改uploadify报错语言为中文，修改jquery.uploadify.js中的英文报错信息

其中Controller中代码如下：

        [AcceptVerbs(HttpVerbs.Post)]
        public JsonResult Upload(HttpPostedFileBase fileData)
        {
            if (fileData != null)
            {
                try
                {
                    // 文件上传后的保存路径
                    string filePath = Server.MapPath("~/Uploads/");
                    if (!Directory.Exists(filePath))
                    {
                        Directory.CreateDirectory(filePath);
                    }
                    string fileName = Path.GetFileName(fileData.FileName);
                    fileData.SaveAs(filePath + fileName);

                    return Json(new { Success = true, FileName = fileName, SaveName = saveName });
                }
                catch (Exception ex)
                {
                    return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
                }
            }
            else
            {
                return Json(new { Success = false, Message = "没有选择上传文件！" }, JsonRequestBehavior.AllowGet);
            }
        }

附件地址：点击打开链接