**使用plupload创建上传图片的页面**
先建立一个plupload上传图片的页面,以下代码是关键部分。
```html
……省略部分代码……
<div id="uploadContainer">
<input type="button" value="选择文件" id="btnBrowse"/>
<input type="button" value="上传文件" id="btnUpload">
<ul id="fileList"></ul>
</div>
……省略部分代码……
<!--引入jquery、plupload.js-->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="plupload/plupload.full.min.js"></script>
<script type="text/javascript">
$(function(){
//获取dom节点
var $uploadContainer = $('#uploadContainer'),
$fileList = $('#fileList'),
$btnUpload = $('#btnUpload');
//实例化一个上传对象
var uploader = new plupload.Uploader({
browse_button: 'btnBrowse',
url: 'upload.ashx',
flash_swf_url: 'plupload/Moxie.swf',
sliverlight_xap_url: 'plupload/Moxie.xap',
filters: {
mime_types: [
//只允许上传图片文件 (注意,extensions中,逗号后面不要加空格)
{ title: "图片文件", extensions: "jpg,gif,png,bmp" }
]
}
});
//存储所有图片的url地址
var urls = [];
//初始化
uploader.init();
//绑定文件添加到队列的事件
uploader.bind('FilesAdded', function (uploader, files) {
//显示添加进来的文件名
$.each(files, function(key, value){
var fileName = value.name,
html = '<li>' + fileName + '</li>';
$fileList.append(html);
});
});
//单个文件上传之后
uploader.bind('FileUploaded', function (uploader, file, responseObject) {
//注意,要从服务器返回图片的url地址,否则上传的图片无法显示在编辑器中
var url = responseObject.response;
//先将url地址存储来,待所有图片都上传完了,再统一处理
urls.push(url);
});
//全部文件上传时候
uploader.bind('UploadComplete', function (uploader, files) {
// 用 try catch 兼容IE低版本的异常情况
try {
//打印出所有图片的url地址
$.each(urls, function (key, value) {
console.log(value);
});
} catch (ex) {
// 此处可不写代码
} finally {
//清空url数组
urls = [];
//清空显示列表
$fileList.html('');
}
});
//上传事件
$btnUpload.click(function(){
uploader.start();
});
});
</script>
```
要保证这个图片能正常上传图片文件!
- 关于wangEditor
- 基本应用
- 开始使用
- 下载wangEditor
- 创建页面
- 生成编辑器
- 与font-awesome的冲突
- 设置高度
- 设置绝对高度
- 默认高度和最大高度
- 初始化内容
- html方式
- javascript方式
- 获取内容
- 追加内容
- 基本配置
- 自定义配置菜单
- 配置onchange监听事件
- 自定义配置表情图标
- 简单表情
- 多组表情
- 配置代码高亮
- 下载highlight
- 使用highlight
- 与wangEditor集成
- 不过滤javascript代码
- 图片上传
- 非跨域
- 使用plupload做一个上传图片的页面
- 在页面加入wangEditor
- 将两者结合
- 后台代码示例
- C#
- java
- php
- nodejs
- 征集
- 跨域
- 下载 wangEditor_uploadImg_assist.html
- 编写后台代码
- 配置url地址
- 后台代码示例
- C#
- java
- python
- nodejs
- 征集
- 粘贴截图
- 其他
- 多语言支持
- 默认中文
- 使用英文
- 使用其他语言
- 单页多个编辑器
- 使用requirejs
- 使用seajs
- 增加 placeholder 功能
- 定制开发