jQuery文件上传插件uploadify

官方网站：http://www.uploadify.com/

 

参考博客：jQuery Uploadify在ASP.NET MVC3中的使用

参考博客：使用uploadify上传图片时返回“Cannot read property 'queueData' of undefined”

参考博客：ASP.NET MVC下使用文件上传

 

 

html代码：

            <div class="form-group">
                <input type="text" id="inputProductID" style="display:none" /> 
                <input type="file" id="file_upload" name="file_upload" />
                <p>
                    <a href="javascript:$('#file_upload').uploadify('upload');">上传第一个</a>
                    <a href="javascript:$('#file_upload').uploadify('upload','*');">上传队列</a>
                    <a href="javascript:$('#file_upload').uploadify('cancel');">取消第一个</a>
                    <a href="javascript:$('#file_upload').uploadify('cancel', '*');">取消队列</a>
                </p>
            </div>

js代码：

        $('#file_upload').uploadify({
            'swf': '@Url.Content("~/Content/uploadify/uploadify.swf")', //指定swf文件
            'uploader': '/ProductImage/upLoadImage',//后台处理的页面
            //按钮显示的文字
            'buttonText': '上传图片',
            //显示的高度和宽度，默认 height 30；width 120
            //'height': 15,
            //'width': 80,
            //上传文件的类型  默认为所有文件    'All Files'  ;  '*.*'
            //在浏览窗口底部的文件类型下拉菜单中显示的文本
            'fileTypeDesc': 'Image Files',
            //允许上传的文件后缀
            'fileTypeExts': '*.gif; *.jpg; *.png',
            //发送给后台的其他参数通过formData指定
            //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
            //上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false  自动生成,  不带#
            //'queueID': 'fileQueue',
            //选择文件后自动上传
            'auto': false,
            //设置为true将允许多文件上传
            'multi': true,
            //设置上传按钮背景图片
            //'buttonImage': '~/Content/uploadify/browse-btn.png',
            //设置已完成上传的文件是否从队列中移除，默认为true
            'removeCompleted': false,
            //设置上传队列中同时允许的上传文件数量，默认为999
            'queueSizeLimit': 1,
            //设置允许上传的文件数量，默认为999
            'uploadLimit': 3,
            //单个文件上传完成时触发事件
            'onUploadComplete': function (file) {
                alert('The file ' + file.name + ' finished processing.');
            },
            //单个文件上传成功后触发事件
            'onUploadSuccess': function (file, data, response) {
                eval("data=" + data);
                alert('文件 ' + file.name + ' 已经上传成功，并返回 ' + response + ' 保存文件名称为 ' + data.SaveName);
            },
            //队列中全部文件上传完成时触发事件
            'onQueueComplete': function (queueData) {
                alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
            }
        });
    })

ASP.NET MVC 代码：

       #region 上传图片
        /// <summary>
        /// 上传图片
        /// </summary>
        /// <param name="fileData"></param>
        /// <returns></returns>
        [AcceptVerbs(HttpVerbs.Post)]
        public JsonResult upLoadImage(HttpPostedFileBase fileData)
        {
            if (fileData != null)
            {
                try
                {
                    // 文件上传后的保存路径
                    string filePath = Server.MapPath("~/UpLoad/");
                    if (!Directory.Exists(filePath))
                    {
                        Directory.CreateDirectory(filePath);
                    }
                    string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称
                    string fileExtension = Path.GetExtension(fileName); // 文件扩展名
                    string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名称

                    fileData.SaveAs(filePath + saveName);

                    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);
            }
        }
        #endregion