<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo uploadImg</title>
<style type="text/css">
body{
line-height: 1.4;
}
.dialogue{
font-size: 0.9em;
border: 1px solid #ccc;
padding: 3px 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #003399;
}
.code{
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}
pre{
border: 1px solid #ccc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #f5f5f5;
padding: 10px;
margin: 5px 0px;
line-height: 1.8;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-size: 0.8em;
}
</style>
<!--引入wangEditor.css-->
<link rel="stylesheet" type="text/css" href="../dist/css/wangEditor-1.3.0.min.css">
</head>
<body style='padding: 0px 30px'>
<a href="http://www.wangEditor.com/" target='_blank'>wangEditor官网</a>
<a href='https://github.com/wangfupeng1988/wangEditor' target='_blank'>下载源码</a>
<a href="http://www.wangEditor.com/doc.html" target='_blank'>文档说明</a>
<h3>wangEditor demo uploadImg</h3>
<textarea id='textarea1' style='height:200px; width:100%;'></textarea>
<!--说明-->
<div style='margin-top:20px; border:1px solid #ccc; padding:0px 10px 15px 10px;'>
<p>在demo-basic.html应用的基础上，可通过传入'uploadUrl'，来配置上传图片功能，<b>支持跨域上传。</b></p>
<p>更加生动的讲解请<a href="http://pan.baidu.com/s/1c0dcbp2" target="_blank">点击这里</a>，视频教程等着你！</p>
<p>
如果您不想使用wangEditor自带的上传图片功能，或者您使用uploadify、plupload专业插件上传图片，
你可以试试<a href="extendMenu/demo.html" target="_blank">自定义扩展菜单</a>的方式上传图片。
</p>
<hr>
<h3>小张和小李的故事</h3>
<p>故事背景：</p>
<ul>
<li>小张，某网站的web前端程序猿，网站的网址是：http://somedomain.com</li>
<li>小李，某网站的后台程序猿，后台服务的网址是：http://serverdomain.com （注意，前后端域名不同，wangEditor支持跨域上传图片）</li>
</ul>
<p>假设小张要使用wangEditor配置图片上传功能。图片上传可不是光web前端就能独立完成的，它还需要服务器后端的支持，于是小张找到小李。于是发生了如下对话：</p>
<p class='dialogue'>小张：“小李子，哥要使用wangEditor配置图片上传，需要你提供一个服务端的API。”</p>
<p class='dialogue'>小李：“一定积极配合组织的工作！不过我在开发服务端API时，需要知道两个事情。第一：后台在request.files时，根据什么id获取文件？第二：文件上传完成或者上传失败时，分别返回什么信息？”</p>
<p>小张看了看前端文件结构，在wangEditor的所有文件中，找到了 <span class='code'>wangEditor_uoloadImg_assist.html</span> 这个文件，并获取了这个文件的url地址：<span class='code'>http://somedomain.com/wangEditor/wangEditor_upload_assist.html</span>，把这个地址记下来，然后继续同小李对话。</p>
<p class='dialogue'>小张：“第一，你必须通过 <span class='code'>wangEditor_uploadImg</span> 这个id获取文件。第二，如果图片上传成功，你要返回 <span class='code'><iframe src="http://somedomain.com/wangEditor/wangEditor_upload_assist.html#ok|图片url"></iframe></span> ；如果上传失败，你要返回 <span class='code'><iframe src="http://somedomain.com/wangEditor/wangEditor_upload_assist.html#错误信息"></iframe></span>。”</p>
<p class='dialogue'>小李：“明白了。”</p>
<p class='dialogue'>小张：“注意，返回的文档类型必须是 <span class='code'>text/html</span>，编码类型必须是 <span class='code'>utf-8</span>。”</p>
<p class='dialogue'>小李：“这个不用你说！”</p>
<p>10分钟之后，小李写下了如下代码：</p>
<pre>
<b>（wangEditor作者标注：以下代码都是算法描述，不是真正可运行的代码。）</b>
//设置类型和编码
response.ContentType = "text/html";
response.Charset = "utf-8";
//获取文件对象 （小张告诉我，必须用 'wangEditor_uploadImg' 获取图片文件 ）
var file = request.files["<b>wangEditor_uploadImg</b>"];
//验证文件对象是否存在
//验证是否是图片格式
//验证图片大小
//验证安全性
//其他各种验证
//如果以上验证没有通过：
response.write(" <b><iframe src="http://somedomain.com/wangEditor/wangEditor_upload_assist.html#错误信息"></iframe> </b>");
//如果顺利通过验证：
//保存图片
//获取图片url地址
response.write(" <b><iframe src="http://somedomain.com/wangEditor/wangEditor_upload_assist.html#ok|图片url地址"></iframe> </b>")
</pre>
<p>小李写完代码，经过单元测试之后，发布程序，然后联系小张。</p>
<p class='dialogue'>小李：小张，后台程序我已经发布了，API地址是：<span class='code'>http://serverdomain.com/data.ashx</span> ，你快去试试吧。</p>
<p class='dialogue'>小张：哇咔咔，这么快！我这就去试试。</p>
<p>于是，小张记录下了小李发给他的API地址，并配置wangEditor。</p>
<pre>
$('#textarea1').wangEditor({
'uploadUrl': '<b>http://serverdomain.com/data.ashx</b>'
});
</pre>
<p>小张运行程序进行测试，发现图片成功上传，并在浏览器的控制台中输出如下log：</p>
<pre>
wangEditor/wangEditor_uploadImg_assist.html提示： wangEditor_uploadImg_assist.html加载完成！
wangEditor/wangEditor_uploadImg_assist.html提示： 获取的hash为 “ok|http://localhost:4780/wangEditor_uploadify_test/uploadedFiles/1088589134.jpg”！
wangEditor/wangEditor_uploadImg_assist.html提示： wangEditor_uploadImg_assist.html页面准备开始调用父页面的wangEditor_uploadImgCallback方法！
wangEditor提示： 父页面的wangEditor_uploadImgCallback方法已经开始被调用！
wangEditor提示： wangEditor_uploadImgCallback方法成功获取到图片url：http://localhost:4780/wangEditor_uploadify_test/uploadedFiles/1088589134.jpg
wangEditor提示： wangEditor_uploadImgCallback方法已经成功插入图片，弹出框也被关闭！
wangEditor/wangEditor_uploadImg_assist.html提示： wangEditor_uploadImg_assist.html页面已经调用完了父页面的wangEditor_uploadImgCallback方法！
</pre>
<p>下班了，小张请小李吃了一顿沙县小吃。</p>
<hr>
<h3>总结</h3>
<p>根据以上的小故事，做几句话的总结：</p>
<p>第一，对于前端开发人员来说，你只需要知道：上传服务的API，并配置到wangEditor中即可。</p>
<p>第二，针对后台开发人员来说，你需要知道：</p>
<ul>
<li>获取文件对象的id（即 'wangEditor_uploadImg' ）</li>
<li>图片上传成功时返回的信息（即 '<iframe src="http://somedomain.com/wangEditor/wangEditor_upload_assist.html#ok|图片url地址"></iframe>'）</li>
<li>图片上传失败时返回的信息（即 '<iframe src="http://somedomain.com/wangEditor/wangEditor_upload_assist.html#错误信息"></iframe>'）</li>
</ul>
<hr>
<h3>使用缩略图？</h3>
<p>当你上传了一个尺寸很大的图片，上传后你在后台通过压缩技术生成了一个小型图片。你想在web前端显示小型图片，同时小型图片链接到大型图片上。该怎么办？</p>
<p>很简单，你只需要将返回结果改为以下字符串即可：</p>
<pre>
<b>" <iframe src="http://somedomain.com/wangEditor/wangEditor_upload_assist.html#ok|真实图片的url地址|缩略图url地址"></iframe> "</b>
</pre>
</div>
<scri
wangEditor.zip （27个子文件） 
dist css 
wangEditor-1.3.0.min.css 9KB fonts icomoon.woff 13KB
icomoon.svg 39KB .DS_Store 6KB icomoon.eot 13KB icomoon.ttf 13KB .DS_Store 6KB js jquery-1.10.2.min.js 110KB wangEditor-1.3.0.min.js 35KB demo 
demo-expressions.html 2KB demo-menuConfig.html 2KB demo-multi-text.html 2KB demo-append.html 2KB form-test.html 645B demo-html.html 2KB demo-onchange.html 2KB .DS_Store 6KB demo-uploadImg.html 8KB byRequirejs require.js 15KB main.js 253B demo.html 2KB demo-basic.html 3KB demo.html 980B extendMenu cssClass.html 4KB demo.html 7KB wangEditor_uploadImg_assist.html 2KB demo-getValue.html 2KB资源评论
itsoo
- 粉丝: 2
最新资源
- 常用功能代码库项目_代码片段集合工具函数开发辅助模块编程示例跨语言支持文档注释测试用例性能优化技巧错误处理方案API封装配置模板自动化脚本数据处理工具网络.zip
- 基于PHP_Swoole框架构建的高性能键值对数据存储服务器_支持内存缓存与持久化存储_提供低延迟高并发的数据读写服务_适用于实时数据处理与缓存加速场景_包含数据压缩与加密功能_支.zip
- zlib-devel-1.2.7-18.el7.x86_64.rpm.zip
- zlib-devel-1.2.7-18.el7.x86_64.rpm.zip
- iOS开发基础工具库_包含文件操作网络访问提示UI设备唯一IDkeychain存储时间戳处理字符串校验Base64编码MD5计算JSON字典转换屏幕适配导航栏高度获取_帮助开发者快.zip
- BodyPaint_3D 3.1.1 笔刷文件包：解决无笔刷问题
- 博恒广告行业专业记账软件v8功能全面上线
- 抖音视频下载助手可批量下载抖音内容
- 抖音视频下载助手可批量下载抖音内容
- SP490E/SP491E：增强型全双工RS-485收发器
- 基坑监测方案标准版
- 高级系统架构师培训讲义
- 基坑监测方案标准版
- 阿里云表格存储中间件自动参数拆装工具_支持主键注解属性列标注子类标注范围查询迭代器查询数据写入条件查询配置客户端快速集成_简化Java应用对阿里云表格存储服务的读写操作减少手动参数.zip
- 基于FMDB的iOS轻量级数据库操作演示项目_数据库操作SQLite封装增删改查事务处理数据模型映射线程安全性能优化错误处理数据持久化CoreData替代方案_帮.zip
- UnionDB低成本高性能地图数据存储引擎_百万级小数据文件查询检索更新增强读写协议高可用存储调度_替代传统PG集中式存储的海量数据处理解决方案_驱动连接池文件锁读写接口API底层存储设计.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
