zoukankan      html  css  js  c++  java
  • MVC 中Simditor上传本地图片

    1.引用样式和js文件

    <link href="~/Content/scripts/plugins/simditor/css/simditor.css" rel="stylesheet" />
    
    <script src="~/Content/scripts/plugins/simditor/js/simditor.js"></script>

    2.初始化Simditor

    var editor = null;
        $(function () {
            //可以参考 http://www.jcodecraeer.com/a/javascript/2015/0201/2393.html
            editor = new Simditor({
                textarea: $('#NewsContent'),
                placeholder: '这里输入公告内容...',
                toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent'],
                upload: {
                    url: '/PublicInfoManage/Notice/SavePic', //文件上传的接口地址
                    params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
                    fileKey: 'fileDataFileName', //服务器端获取文件数据的参数名
                    connectionCount: 3,
                    leaveConfirm: '正在上传文件'
                }
            });
        })

    upload设置好就会出现下图中的选项

    实现功能之前需要修改一下引用的js文件,使用查看浏览器的审核元素功能查看,发现input按钮么有name属性

    3.打开Simditor.js文件搜索accept属性,然后添加“name=“fileData”属性,共有两处需要添加,如下图

    4.编写后台处理图片代码

    /// <summary>
           /// 上传图片
           /// </summary>
           /// <returns></returns>
           public ActionResult SavePic()
           {
               HttpPostedFileBase file = Request.Files["fileDataFileName"];
               if (file != null)
               {
                   string strPath = HttpContext.Server.MapPath("/Content/Upload/");
                   if (!Directory.Exists(strPath))
                   {
                       Directory.CreateDirectory(strPath);
                   }
                   string filePath = Path.Combine(strPath, Path.GetFileName(file.FileName));
                   file.SaveAs(filePath);
                   return Success("上传成功!");
               }
               else
               {
                   return Success("上传失败!");
               }
                
           }

    来源:http://www.cnblogs.com/ZJ199012/p/6134782.html

  • 相关阅读:
    visual studio 2010的安装
    安装操作系统的过程图解
    教育法学第八章单元测试MOOC
    教育法学第七章单元测试MOOC
    教育法学第六章单元测试MOOC
    教育法学第四章单元测试MOOC
    教育法学第三章单元测试MOOC
    教育法学第一章单元测试MOOC
    教育法学-第二章单元测验mooc
    单元测验4:人格知识大比武2mooc
  • 原文地址:https://www.cnblogs.com/youmingkuang/p/6548054.html
Copyright © 2011-2022 走看看