今天的主要工作是对发布页面的改进,我们当前的发布只能发布文字,这次的改进是能插入图片,我们使用了iframe控件,他的作用是将在线编辑的文档转换为html代码,这样显示解析时就能显示超文本元素了:
接下来我们以上传图片为例:
<div class="span2" style="margin-top:20px">
<input id="img_input2" type="file" accept="image/*" multiple="multiple"/>
<label for="img_input2" id="img_label2">选择图片
<i class="fa fa-plus fa-lg"></i>
</label>
</div>
我们先利用input为file的加入文件
之后利用JS完成图片的插入渲染
$("#img_input2").on("change", function(e) {
var file = e.target.files[0]; //获取图片资源
// 只选择图片文件
if (!file.type.match('image.*')) {
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file); // 读取文件
// 渲染文件
reader.onload = function(arg) {
var img = '<img class="preview" style="width:400px;" src="' + arg.target.result + '" alt="preview"/>';
$(".cleditorMain").find('iframe').contents().find('body').append(img);
}
this.value = '';
});
先获取图片文件,然后读取渲染图片,之后新造一个img标签,将其添加到iframe中body的最后,就完成了插入图片的操作。
效果如下: