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: ,
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

MVC 中Simditor上传本地图片的更多相关文章

  1. KindEditor上传本地图片在ASP.NET MVC的配置

    http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html 本文解决KindEditor上传本地图片在ASP.NET MVC中的配置. ...

  2. .net mvc4 利用 kindeditor 上传本地图片

    http://blog.csdn.net/ycwol/article/details/41824371?utm_source=tuicool&utm_medium=referral 最近在用k ...

  3. tinymce4.x 上传本地图片(自己写个插件)

    tinymce是一款挺不错的html文本编辑器.但是添加图片是直接添加链接,不能直接选择本地图片. 下面我写了一个插件用于直接上传本地图片. 在tinymce的plugins目录下新建一个upload ...

  4. tinymce4.x 上传本地图片 (转载)

    转载自:http://www.cnblogs.com/fhen/p/5809514.html tinymce4.x 上传本地图片   tinymce是一款挺不错的html文本编辑器.但是添加图片是直接 ...

  5. vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案

    现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...

  6. ASP.NET:MVC中文件上传与地址变化处理

    目录 文件的上传和路径处理必须解决下面列出的实际问题: 1.重复文件处理 2.单独文件上传 3.编辑器中文件上传 4.处理文章中的图片路径 5.处理上传地址的变化 一.上传文件和重复文件处理 文件处理 ...

  7. 个人永久性免费-Excel催化剂功能第102波-批量上传本地图片至网络图床(外网可访问)

    自我突破,在100+功能后,再做有质量的功能,非常不易,相对录制视频这些轻松活,还是按捺不住去写代码,此功能虽小,但功课也做了不少,希望对真正有需要的群体带来一些惊喜. 背景介绍 图床的使用,一般是写 ...

  8. 有道云笔记Markdown上传本地图片的方法

    有道云笔记截图&保存   方法有多种,例如:开通有道云笔记VIP会员.先将图片文件上传到有道云笔记后使用图片的分享链接.说到底还是使用的 Markdown 的图片功能 ![图片名称](图片链接 ...

  9. html5上传本地图片,在线预览及裁剪(filereader,canvas)

    1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下: //本地图片在上传之前的预览效果 //图片上传预览 function previewIm ...

随机推荐

  1. Tomcat重启session失效

    在Tomcat的目录下找到context.xml,取消掉<Manager pathname="" /> 这句的注释.

  2. Ubuntu16.04 安装 “宋体,微软雅黑,Consolas雅黑混合版编程字体” 等 Windows 7 下的字体

    Windows平台下,“宋体”.“微软雅黑”.“Courier New(编程字体)”用的比较多,看的也习惯了.那如何在 Ubuntu下也安装这些字体呢? 操作步骤如下: 第一步:从 Windows 7 ...

  3. QC质量管理七大手法

    1.层别法 层别法就是将大量有关某一特定主题的观点.意见或想法按组分类,将收集到的大量的数据或资料按相互关系进行分组,加以层别.层别法一般和柏拉图.直方图等其它七大手法结合使用,也可单独使用. 2.查 ...

  4. iis服务器配置

    对应的步骤在文件中上传了rar文件 1 .net framework 4.0 和 framework 4.5 直接安装程序  先安装4.0 再安装4.5 顺序不能颠倒!下载完直接安装 如果有会提示本机 ...

  5. jquery 的each函数

    each函数经常用到.它本身就是一个循环遍历 你可以可以break continue 但这是在for while循环中 each中我们可以这样 下面的例子是遍历 MyTable中所有的tr 第一个td ...

  6. php传值,传地址,传引用的区别

    传值,   是把实参的值赋值给行参   那么对行参的修改,不会影响实参的值 传地址   是传值的一种特殊方式,只是他传递的是地址,不是普通的如int   那么传地址以后,实参和行参都指向同一个对象 传 ...

  7. mysql表空间文件

    1.共享表空间文件.默认表空间文件是ibdata1,大小为10M,且可拓展.共享表空间可以由多个文件组成,一个表可以跨多个文件而存在,共享表空间的最大值限制是64T. 2.独立表空间文件.独立表空间只 ...

  8. mysql事务详解

    事务的四大特性ACID如下:       原子性:事务中的所有操作,要么全部完成,要么不做任何操作,不能只做部分操作.如果在执行的过程中发了错误,要回滚(Rollback)到事务开始前的状态,就像这个 ...

  9. jstat命令查看jvm的GC情况

    jstat命令可以查看堆内存各部分的使用量,以及加载类的数量.命令的格式如下: jstat [-命令选项] [vmid] [间隔时间/毫秒] [查询次数]  注意!!!:使用的jdk版本是jdk8. ...

  10. vue 渲染页面的时候 出现闪烁问题的解决办法

    在使用vue绑定数据的时候,渲染页面时会出现变量闪烁 <div id="h_cameraman" v-cloak> <public-nav> {{ msg ...