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: ,
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上传本地图片的更多相关文章
- KindEditor上传本地图片在ASP.NET MVC的配置
http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html 本文解决KindEditor上传本地图片在ASP.NET MVC中的配置. ...
- .net mvc4 利用 kindeditor 上传本地图片
http://blog.csdn.net/ycwol/article/details/41824371?utm_source=tuicool&utm_medium=referral 最近在用k ...
- tinymce4.x 上传本地图片(自己写个插件)
tinymce是一款挺不错的html文本编辑器.但是添加图片是直接添加链接,不能直接选择本地图片. 下面我写了一个插件用于直接上传本地图片. 在tinymce的plugins目录下新建一个upload ...
- tinymce4.x 上传本地图片 (转载)
转载自:http://www.cnblogs.com/fhen/p/5809514.html tinymce4.x 上传本地图片 tinymce是一款挺不错的html文本编辑器.但是添加图片是直接 ...
- vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案
现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...
- ASP.NET:MVC中文件上传与地址变化处理
目录 文件的上传和路径处理必须解决下面列出的实际问题: 1.重复文件处理 2.单独文件上传 3.编辑器中文件上传 4.处理文章中的图片路径 5.处理上传地址的变化 一.上传文件和重复文件处理 文件处理 ...
- 个人永久性免费-Excel催化剂功能第102波-批量上传本地图片至网络图床(外网可访问)
自我突破,在100+功能后,再做有质量的功能,非常不易,相对录制视频这些轻松活,还是按捺不住去写代码,此功能虽小,但功课也做了不少,希望对真正有需要的群体带来一些惊喜. 背景介绍 图床的使用,一般是写 ...
- 有道云笔记Markdown上传本地图片的方法
有道云笔记截图&保存 方法有多种,例如:开通有道云笔记VIP会员.先将图片文件上传到有道云笔记后使用图片的分享链接.说到底还是使用的 Markdown 的图片功能 
1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下: //本地图片在上传之前的预览效果 //图片上传预览 function previewIm ...
随机推荐
- [目标检测]SSD原理
1 SSD基础原理 1.1 SSD网络结构 SSD使用VGG-16-Atrous作为基础网络,其中黄色部分为在VGG-16基础网络上填加的特征提取层.SSD与yolo不同之处是除了在最终特征图上做目标 ...
- Unity 小知识
1.如何使物体颜色成2D效果 点开材质球的Shader属性,选择Unlit/Color 2.画布属性中的UI Scale Mode中可以设为 S W S S,这样屏幕大小缩放时,画布内的物体大小随之缩 ...
- 在centos7下安装svn
SVN的安装 yum install subversion 服务端命令 1. svnserver - 控制svn系统服务的启动等 2. svnadmin - 版本库的创建/导出/导入/删除等 3. s ...
- vue学习五之VueCLi
概念 通俗的说,Vue CLI是我们创建大型项目时的脚手架,所谓脚手架,就是帮助我们建设好了建造大厦的所需模板,建设者只需往模板里面填入实质内容,即可完成大厦的建设,对于程序开发来说,脚手架使程序员只 ...
- 怎么申请 bing api key
1:打开网址 https://login.live.com/ 注册帐号并登录(点击上图中的登录按钮即可),在新窗口点击下方的“立即注册”(有帐号的可以直接登录) 2:填写相关信息(推荐使用hotmai ...
- HashMap(JDK1.9)详解
一.HashMap的概念. 1.HashMap类的继承实现关系如下:因此HashMap的功能有:可序列化.可克隆等功能. 2.HashMap的数据结构:数组+链表+红黑树. 3.键值对的存储方案:第一 ...
- Baidu 推荐技术平台(offer)
一面: 1 自我介绍 项目介绍. 2 RNN 原理,LSTM原理,GBDT原理,XGB与GBDT的改进. 3 多模匹配,字典树,链表环找入口. 4 c++ static 关键字 5 多线程,线程安全 ...
- vs2013中将原来在iis express中的网站转到iis中时,报“无法在web服务器上调试”的解决方法
之前在网上也搜索过,但没有一个是正确的,后来在微软网站上发现问题的解决方法: 在web.config中,打开调试就可以了,具体方法为: 在web.config中 在以下配置节中加入以下代码 <c ...
- ng-深度学习-课程笔记-0: 概述
课程概述 这是一个专项课程(Specialization),包含5个独立的课程,学习这门课程后做了相关的笔记记录. (1) 神经网络和深度学习 (2) 改善深层神经网络:超参数调试,正则化,优化 ( ...
- Scrapy: 初识Scrapy
1.初识Scrapy Scrapy是为了爬取网站数据,提取结构性数据而编写的应用框架.可以应用在包括数据挖掘,信息处理或者存储历史数据等一系列的程序中. 2.选择一个网站 当需要从某个网站获取信息时, ...