百度的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. iOS Swift-控制流(The Swift Programming Language)

    iOS Swift-控制流(The Swift Programming Language) for-in 在Swift中for循环我们可以省略传统oc笨拙的条件和循环变量的括号,但是语句体的大括号使我 ...

  2. 数据仓库之启用cdc

    准备工作: 先将sqlservere 代理服务启动 USE [MyDB]; GO EXECUTE sys.sp_cdc_enable_db; --启用数据库对CDC的支持 GO -- 设置别名 @ca ...

  3. Oracle常用语句集合

    oracle常用经典SQL查询 常用SQL查询: .查看表空间的名称及大小 )),) ts_size from dba_tablespaces t, dba_data_files d where t. ...

  4. Linux脚本学习

    1.脚本 linux下创建一个以.sh为后缀名的文件,然后更改权限为可执行,这就变成了一个脚本文件 touch test.sh chmod u+x test.sh 脚本的最简单使用方式,就是批量命令的 ...

  5. 烂泥:学习tomcat之通过shell批量管理多个tomcat

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb 公司的业务是使用tomcat做web容器,为了更有效的利用服务器的性能,我们一般部署多个 ...

  6. macOS安装Solr并索引MySQL

    安装 Java 语言的软件开发工具包 brew cask install java 或者在 Oracle官网 中选择 Mac 版本 jdk-8u111-macosx-x64.dmg 下载并安装. 安装 ...

  7. Android资源(图片)命名规范

    (转自:http://www.jb51.net/article/38796.htm) 图片命名注意: 1,不能以下划线("_")开头: 2,以数字加下划线("[0-9]_ ...

  8. [WPF系列]-TreeView的常用事项

    引言 项目经常会用Treeview来组织一些具有层级结构的数据,本节就将项目使用Treeview常见的问题作一个总结. DataBinding数据绑定 DataTemplate自定义 <Hier ...

  9. Makefile 编写 tips

    1.变量赋值 VARIABLE = value #在执行时扩展,允许递归扩展 VARIABLE := value #在定义时扩展 VARIABLE ?= value #只有在该变量为空时才设置该值 V ...

  10. Oozie coordinator 作业自定义的配置的一些方法

    Oozie的coordinator有啥用? The Oozie Coordinator system allows the user to define and execute recurrent a ...