2018/5/25 山东大学学习资源聚合平台工作

今天的主要工作是对发布页面的改进，我们当前的发布只能发布文字，这次的改进是能插入图片，我们使用了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的最后，就完成了插入图片的操作。

效果如下：