uploadify的简单使用

最新推荐文章于 2025-07-12 14:09:35 发布

转载最新推荐文章于 2025-07-12 14:09:35 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chenze-Index/p/9254248.html

文章标签：

#javascript #ViewUI

本文介绍如何使用Uploadify插件实现简单的图片上传功能。主要包括：从官网下载插件，引入所需的CSS和JS文件，配置JS页面完成图片上传设置，并在Controller中处理图片上传逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的图片上传：

　　1.进入官网下载uploadify插件：http://www.uploadify.com/download/

　　2.导入uploadify插件提供的css样式和类库：　

 <link href="~/Content/uploadify/uploadify.css" rel="stylesheet" />
 <script src="~/Content/uploadify/jquery.uploadify.min.js"></script>

　　3.js页面

var auth = "@(Request.Cookies[FormsAuthentication.FormsCookieName]==null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value)";
var ASPSESSID = "@Session.SessionID";
$("#j_btn").uploadify({
   buttonText: '上传图片',
   height: 20,
   width: 120,
   swf: '/Content/uploadify/uploadify.swf',
   uploader: '/Test_Areas/Test/Upload',//通过后台的程序把文件上传到服务器
   multi: false,//是否允许同时选择多个文件
   fileSizeLimit: '8MB',//文件大小
   fileTypeExts: '*.gif;*.png;*.jpg;*jpeg',//可选文件的扩展名
   formData: {
       'folder': '/Upload', 'ASPSESSID': ASPSESSID, 'AUTHID': auth//测试
         },
   onUploadSuccess: function (file, data, response) {
      var jsonData = $.parseJSON(data);
      $.procAjaxMsg(jsonData, function () {
          $.alertMsg(jsonData.Msg, '操作提示', function () {
             addForm.find("#addForm img").attr("src", jsonData.BackUrl);
             //此处得到的是上传路径
          });
      }, function () {
          $.alertMsg(jsonData.Msg, '操作提示', null);
      });
    },
    onUploadError: function (file, errorCode, errorMsg, errorString) {
       $.alertMsg('文件 ' + file.name + ' 上传失败: ' + errorString, '上传失败', null);
       },
    onSelectError: function (file, errorCode, errorMsg, errorString) {
       $.alertMsg('文件 ' + file.name + ' 不能被上传: ' + errorString, '选择失效', null);
       }
    })

4.Controller页面

 #region 08-上传图片
        /// <summary>
        /// 08-上传图片
        /// </summary>
        /// <returns></returns>
        public ActionResult Upload()
        {
            try
            {
                if (Request.Files.Count == 0)
                {
                    return PackagingAjaxmsg(new AjaxMsgModel { BackUrl = null, Data = null, Msg = "未找到要上传的图片", Statu = AjaxStatu.err });
                }
                else
                {
                    //得到上传的图片
                    var file = Request.Files[0];
                    //要保存的文件路径
                    var path = Path.Combine(Server.MapPath(Request.ApplicationPath), "Upload", "Image");
                    if (!Directory.Exists(path))
                    {
                        Directory.CreateDirectory(path);
                    }
                    //要保存的文件名称
                    string fileName = string.Format("{0}_{1}{2}", oc.CurrentUser.uId, DateTime.Now.ToString("yyyyMMddHHmmss"), Path.GetExtension(file.FileName));
                    //保存文件到指定的目录
                    file.SaveAs(Path.Combine(path, fileName));
                    //上传之后图片的相对路径
                    string relativePath = Path.Combine(Request.ApplicationPath, "Upload", "Image", fileName);
                   
                    return PackagingAjaxmsg(new AjaxMsgModel { BackUrl = relativePath, Data = null, Msg = "上传成功", Statu = AjaxStatu.ok });
                }
            }
            catch (Exception ex)
            {
                return PackagingAjaxmsg(new AjaxMsgModel { BackUrl = null, Data = null, Msg = "图片上传失败", Statu = AjaxStatu.err });
            }
        }
        #endregion