百度的UEditor编辑器的强大之处不用多说,但是有时候我们只想用他的文件、图片上传模块,不想把这个编辑器加载出来,话不多说,直接上实现代码:

引用文件:
<script src="~/Content/ueditor/ueditor.config.js"></script>
<script src="~/Content/ueditor/ueditor.all.min.js"></script>
<script src="~/Content/ueditor/lang/zh-cn/zh-cn.js"></script>
<script src="~/Content/ueditor/ueditor.all.js"></script> 修改配置(找到ueditor/net下的config.json文件):
"imageUrlPrefix": "http://localhost:5531", /* 图片访问路径前缀 【修改成自己项目的路径】 前台代码
1.【加载整个编辑器】: @Html.TextAreaFor(model => model.jobDescription) <script type="text/javascript">
var editorOption = {
initialFrameWidth: 1000,
initialFrameHeight: 200
};
var editor = new baidu.editor.ui.Editor(editorOption);
editor.render('jobDescription');
$('form').submit(function () {
$('#jobDescription').val(editor.getContent());
});
</script>
2.【上传文件独立模块】:
<table class="table table-bordered table-hover definewidth m10">
<tr>
<td width="10%" class="tableleft">
<span>附件上传</span>
</td>
<td>
<script type="text/plain" id="j_ueditorupload" style="height:5px;display:none;">
</script>
<script type="text/javascript">
//实例化编辑器
var o_ueditorupload = UE.getEditor('j_ueditorupload',
{
autoHeightEnabled: false
});
o_ueditorupload.ready(function () { o_ueditorupload.hide();//隐藏编辑器 //监听图片上传,地址:arg[0].src
o_ueditorupload.addListener('beforeInsertImage', function (t, arg) {
//alert('这是图片地址:' + arg[0].src);
//这里解析你的返回类型 }); /* 文件上传监听
* 1、在ueditor.all.min.js文件中找到
* d.execCommand("insertHtml",l);
* 之后插入d.fireEvent('afterUpfile',b);
* 2、打开ueditor.all.js,在filelist = utils.isArray(filelist) ? filelist : [filelist];后面加上以下代码:
* if(me.fireEvent('afterUpfile', filelist) === true){
* return;
* }
*/ //o_ueditorupload.addListener('afterUpfile', function (t, arg) {
// alert('这是文件地址:' + arg[0].url);
//});
}); //弹出图片上传的对话框
function upImage() {
var myImage = o_ueditorupload.getDialog("insertimage");
myImage.open();
}
//弹出文件上传的对话框
function upFiles() {
var myFiles = o_ueditorupload.getDialog("attachment");
myFiles.open();
}
</script>
<button type="submit" onclick="upImage()">上传图片</button>
<button type="submit" onclick="upFiles()">上传文件</button>
</td>
</tr>
</table>

  

UEditor独立图片、文件上传模块的更多相关文章

  1. springmvc图片文件上传接口

    springmvc图片文件上传 用MultipartFile文件方式传输 Controller package com.controller; import java.awt.image.Buffer ...

  2. SpringMvc MultipartFile 图片文件上传

    spring-servlet.xml <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 --> <bean id="multipar ...

  3. .Net Core 图片文件上传下载

    当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...

  4. 基于SqlSugar的开发框架循序渐进介绍(7)-- 在文件上传模块中采用选项模式【Options】处理常规上传和FTP文件上传

    在基于SqlSugar的开发框架的服务层中处理文件上传的时候,我们一般有两种处理方式,一种是常规的把文件存储在本地文件系统中,一种是通过FTP方式存储到指定的FTP服务器上.这种处理应该由程序进行配置 ...

  5. PHP 图片文件上传代码

    通过 PHP,可以把文件上传到服务器.里面加入一些图片的判断,如果不加判断文件的类型就可以上传任意格式的文件. 为了网站的安全,肯定不让上传php文件,如果有人进入你的后台,上传了一个php文件,你的 ...

  6. PHP 图片文件上传代码分享

    分享下php上传图片文件的一段代码,挺不错的. 通过 PHP,可以把文件上传到服务器.加入一些图片的判断,如果不加判断文件的类型就可以上传任意格式的文件. 当然了,会禁止上传php文件,以及其它程序代 ...

  7. PHP图片文件上传类型限制扩展名限制大小限制与自动检测目录创建。

    程序测试网址:http://blog.z88j.com/fileuploadexample/index.html 代码分为两部分: 一部分form表单: <!doctype html> & ...

  8. iOS分享 - AFNetworking之多图片/文件上传

    在分享经验之前,先说点题外话,之前的一个项目涉及到了多图片的上传,本来以为是一个很简单的事情,却着实困扰了我好久,究其原因,一是我不够细心,二是与后台人员的交流不够充分.在此,我想将我的老师常说的一句 ...

  9. Struts2图片文件上传,判断图片格式和图片大小

    1. 配置Struts2能够上传的最大文件大小 使用Struts2进行文件上传的时候,Struts2默认文件大小最大为2MB,如果要传大一点的文件,就需要修改struts.xml配置文件,重新设置能够 ...

随机推荐

  1. The file “base.app” couldn’t be opened because you don’t have permission to view it.

    Base项目是在Xcode7上创建的,升级Xcode8以后,编译时候提示错误: The file "base.app" couldn't be opened because you ...

  2. SQL SERVER 监控数据文件增长情况

    在项目前期评估数据库的增长情况,然后根据数据库数据量的增长情况来规划存储的分配其实是一件比较麻烦的事情.因为项目没有上线,用什么来评估数据库的数据增长情况呢? 如果手头没有实际的数据,我们只能从表的数 ...

  3. WebApi Post 后台无法获取参数的解决方案

    事件回放: 之前一段时间,公司里前端用的Angularjs 发送http请求也是用的ng的组件,后台是.Net的WebApi 前端 var data = { PArgs: { PageIndex: 0 ...

  4. union和union all用法

    工作中,遇到同事之前写的oracle语句中有一个union all,并且很多地方都用到了.便在网上查了一下用法,以下是自己的理解. union  (联合)将两个或者多个结果集合并. 在使用时,两个结果 ...

  5. URL无法显示某些特殊符号

    URL无法显示某些特殊符号,这个时候就要使用编码了.编码的格式为:一个百分号,后面跟对应字符的ASCII(16进制)码值.例如 空格的编码值是"%20".(ASCII参考)URL中 ...

  6. 2016款MACBOOK PRO触控条版 安装WIN10初体验 及 无奈退货记

    新的2016MBP终于发布了,作为把苹果电脑装WIN使用的人,等候很久之后,终于可以行动了. 黄山松 (Tom Huang) 发表于博客园http://www.cnblogs.com/tomview/ ...

  7. 我是如何把VC6一直用到2016年的

    写下这个标题的时候,也是表明必须需要改变的时候了…… 黄山松 (Tom Huang) 发表于博客园http://www.cnblogs.com/tomview/ 最早从windows3.1使用vb3编 ...

  8. html中的meta详解

    1  name=viewport <meta name="viewport" content="width=device-width,initial-scale=1 ...

  9. 1、策略模式(Strategy)

    //抽象接口 class ReplaceAlgorithm { public: ; }; //三种具体的替换算法 class LRU_ReplaceAlgorithm : public Replace ...

  10. MySQL双主(主主)架构方案

    在企业中,数据库高可用一直是企业的重中之重,中小企业很多都是使用mysql主从方案,一主多从,读写分离等,但是单主存在单点故障,从库切换成主库需要作改动.因此,如果是双主或者多主,就会增加mysql入 ...