百度的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. SSDT旧版本对于xml数据的处理BUG

    在早期版本中,CLR中声明sqlxml时,SSDT会将CLR函数中使用的类型解析为NVARCHAR(4000),最终导致传向CLR函数的数据不完整              

  2. HADOOP安装指南-Ubuntu15.10和hadoop2.7.2

    Ubuntu15.10中安装hadoop2.7.2安装手册 太初 目录 1.      Hadoop单点模式... 2 1.1        安装步骤... 2 0.环境和版本... 2 1.在ubu ...

  3. 分布式集群系统下的高可用session解决方案

    目前,为了使web能适应大规模的访问,需要实现应用的集群部署. 而实现集群部署首先要解决session的统一,即需要实现session的共享机制. 目前,在集群系统下实现session统一的有如下几种 ...

  4. RMAN异机恢复遭遇ORA-01547、ORA-01152、ORA-01110错误案例

    测试环境:     操作系统  :  Red Hat Enterprise Linux ES release 4 (Nahant Update 4)   VMWARE     数据库     :  O ...

  5. SQL范式

    第一范式:确保每列的原子性(字段不可分). 如果每列(或者每个属性)都是不可再分的最小数据单元(也称为最小的原子单元),则满足第一范式. 释义: 1.每一列属性都是不可再分的属性值,确保每一列的原子性 ...

  6. Linux下监控服务器状态命令——top

    ----------------------------------工作中常用的命令,来判断服务器状态是否正常------------------------------------- top命令作用 ...

  7. PHP笔记(CSS篇)

    HTML常用于在网页中显示内容,当然,还可以是布局,但是比较不方便,所以,引进了CSS CSS全称Cascading Style Sheets,中文名:层叠样式表 帮助文档:CSS.chm 作用:布局 ...

  8. Oracle11g的最佳灵活体系结构OFA

  9. 1、策略模式(Strategy)

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

  10. 蓝牙BLE传输性能及延迟分析

    BLE传输性能主要受以下几个因素影响:操作类型,Connection Interval,每个Connection Event内发送的帧数.每一帧数据的长度.具体参见如下链接: https://devz ...