jQuery开源组件--uploadify

Posted 2020-10-09 北冥冰皇

官方网站：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