百度的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. android-async-http AsyncHttpClient介绍

    前一阵子刚搬了家,加上公司要发新版本,所以一直比较忙,文章也好几周没更新了.难得这个周末有空,正好周内偶然间闲逛 发现这个很不错的第三方开源类库,针对Android开发中发送http请求的. 在And ...

  2. Java调优知识汇总

    查看java进程运行状况jps -lvm 查看java默认堆大小 java -XX:+PrintFlagsFinal | grep MaxHeapSize eclipse调试设置vm参数 在项目上右键 ...

  3. SE(homework2)_软件分析

    老师这次课后的作业具有开放性,很容易的我会想到经常用的那些工具软件,MATLAB,envi,ARCGIS等等. Q1:此类软件是什么时候出现的,这些软件是怎么说服你(陌生人)成为它们的用户的?他们的目 ...

  4. SQL Server 2012安装错误案例:Error while enabling Windows feature: NetFx3, Error Code: -2146498298

    案例环境: 服务器环境 :    Windows Server 2012 R2 Standard 数据库版本 :    SQL Server 2012 SP1 案例介绍:   在Windows Ser ...

  5. 最新版powerdesign16.5连接数据库错误解决

    由于工作需要,需要将数据库中的表结构逆向生成到powerdesign中,但是连接数据库一直连接不上,Connection test failed报如下错误: 解决方案: 下载ojdbc14.jar,拷 ...

  6. 从零自学Hadoop(11):Hadoop命令上

    阅读目录 序 概述 Hadoop Common Commands User Commands Administration Commands File System Shell 引用 系列索引 本文版 ...

  7. ES5 的 setter 和 getter

    有两种方式使用 setter 和 getter 1. set/get var person = { _name: '', get name() { return this._name }, set n ...

  8. linux命令之tail

    tail用于输出文件末尾部分.一个比较有用的功能是tail + grep实现类似于安卓开发时调试使用的logcat,具体操作是: 一般我是用SecureCRT连接linux,然后使用SecureCRT ...

  9. python 数据处理学习pandas之DataFrame

    请原谅没有一次写完,本文是自己学习过程中的记录,完善pandas的学习知识,对于现有网上资料的缺少和利用python进行数据分析这本书部分知识的过时,只好以记录的形势来写这篇文章.最如果后续工作定下来 ...

  10. 【2016-11-1】【坚持学习】【Day16】【MongoDB】【复制集 分片】

    Mongodb 两种集群方式 复制集 通常是一主一从,一主多从 mongodb的复制至少需要两个节点.其中一个是主节点,负责处理客户端请求,其余的都是从节点,负责复制主节点上的数据. mongodb各 ...