新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

首先我们来观察下页面上图片控件

近期由于连串供给,要落到实处三个前端文本编辑框,附带图片上传实时翻看的法力。比较了英特网的四款插件,首先是百度的UEitor,开掘该框架过于庞大,八个小框架引进如此多的文书实际不是自家想看看的;其次是jQuery的easyUI,尽管个人版的是无需付费的,不过项目属于集团事情,仿佛用商业版的框架并不妥。思考到品种的前端首要正是在bootstrap的底子上创设起来的,最终选择了bootstrap-wysiwyg插件,它极度的精简,轻松何况扩展性强。

引进bootstrap-wysiwyg并且完结文本编辑效率拾壹分的便捷,然而,小编留意到,图片上传是用fileapi实现的。对于一大半网址,尽管用FileApi达成无上传预览用户体验拾叁分好,可是真的存入数据库的时候,大家依然愿意能够存款和储蓄图片的在服务器的静态路线,而并不是字符串化的图样。简单来说,我们需求对bootstrap-wysiwyg(以下简称WY)做稍微改写。

先是我们来考查下页面上海教室片控件,别的的控件略过,查一下源码,很轻松察觉如下代码:

<div class="btn-group">
 <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn">
 <i class="icon-picture"></i></a>
  <input type="file" data-role="magic-overlay" 
   data-target="#pictureBtn"
  data-edit="insertImage" />
</div>

做一下认证,data-role,data-target属性是bootstrap中预约义的事件,在这里大家能够清楚为布局相关,不用思索。关键点来了,第八个属性data-edit,bootstrap中并未这一风云,观看bootstrap-wysiwyg.js,能够窥见这么局地代码:

toolbar.find('input[type=file][data-'   options.commandRole   ']')
   .change( ...
   ...
commandRole : 'edit',

也等于说,该属性其实是为了便利选取器而完毕的,约等于给图片开关增多了监听器事件。

大家随后探究一下WY图片预览的兑现,第一步,仿佛上边代码浮现的等同,监听器捕捉到fileInput的change事件,做出响应,调用insertFiles函数

restoreSelection();
if (this.type === 'file' && this.files && this.files.length > 0) {
 insertFiles(this.files);
}
saveSelection();
his.value = '';

找到insertFiles函数

insertFiles = function (files) {
  editor.focus();
  $.each(files, function (idx, fileInfo) {
   if (/^image//.test(fileInfo.type)) {
   $.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) {
    execCommand('insertimage', dataUrl);
   }).fail(function (e) {
    options.fileUploadError("file-reader", e);
   });
   } else {
   options.fileUploadError("unsupported-file-type", fileInfo.type);
   }
  });
  }

大家注意到它利用了jQuery的$.Deferred()方法,先调用了三个readFileIntoDataUrl方法,成功之后经过自封装的execCommand方法达成将图片输出到文本框。该图形其实便是二个<img>标签,只然则src属性是用字符串表示的图片。所以大家要做的实在是在监听器触发之后,将文件上传,得到图片的src,再把链接交给随后的execCommand方法。

由于笔者对Deferred并非专程纯熟,所以依然采纳特别常见的callback情势

观望ajaxFileUpload的调用格局:

$.ajaxFileUpload({
  url : ...,
  secureurl : false,
  fileElementId : ...,
  dataType : "json",
  success : function(obj) {
   ...
  },
  error : function() {
   ...
  }
  });

有八个必选的本性,url和fileElementId,为了维持信赖的不易,重写ajaxFileUpload是不可取的。不过出于WY的控件是监听器完成的,所以通过函数将参数字传送过去是不现实的,所以大家须求团结对输入框定义一些属性来达到指标。

在fileInput中增多一些性子

<input type="file" id="pictureInput" name="picture"
   data-role="magic-overlay" data-target="#pictureBtn"
   data-edit="insertImage" action="..." />

id 用作 fileElementId,name属性也是必须的,主借使为了后台取值指名,action是图形要求交给到的url

在bootstrap-wysiwyg.js中定义贰个函数名称叫uploadFileToServer,函数格式如下:

var uploadFileToServer = function(id, action, callback) {
 $.ajaxFileUpload({
  url : action,
  secureurl : false,
  fileElementId : id,
  dataType : 'json',
  success : function(obj) {
  if (obj.status) {
   callback(obj.imgsrc);
  } else
   options.fileUploadError("server-internal-exception",
    obj.message);
  },
  error : function() {
  options.fileUploadErroe("upload-failure", "");
  }
 });

将insertFiles方法作改写如下:

insertFiles = function(files, id, action) {
  editor.focus();
  $.each(files, function(idx, fileInfo) {
  if (/^image//.test(fileInfo.type)) {
   /*
   * $.when(readFileIntoDataUrl(fileInfo)).done(function(dataUrl) {
   * execCommand('insertimage', dataUrl); }).fail(function(e) {
   * options.fileUploadError("file-reader", e); });
   */
   uploadFileToServer(id, action, function(src) {
   execCommand('insertimage', src);
   });
  } else {
   options.fileUploadError("unsupported-file-type",
    fileInfo.type);
  }
  });

再就是对监听器做出肯定的修改,以便得到须要的品质

toolbar.find('input[type=file][data-'   options.commandRole   ']')
  .change(
   function() {
    restoreSelection();
    if (this.type === 'file' && this.files
     && this.files.length > 0) {
     insertFiles(this.files, $(this).attr('id'),
      $(this).attr('action'));
    }
    saveSelection();
    this.value = '';
    });

重中之重是增加了三个参数地方。

那般,改写便实现了,注意,要确认保证正确实践,请在控件在此以前引用ajaxFileUpload.js.

假使大家还想浓密学习,可以点击这里开始展览学习,再为大家附3个地道的专项论题:

Bootstrap学习课程

Bootstrap实战教程

Bootstrap插件使用教程

如上便是本文的全部内容,希望对大家的读书抱有帮忙,也可望大家多多援救脚本之家。

您只怕感兴趣的小说:

  • vuejs开采组件分享之H5图形上传、压缩及摄影旋转的题目管理
  • Vue.js 2.0 移动端拍照压缩图片上传预览功用
  • Bootstrap中的fileinput 多图片上传及编辑功用
  • BootStrap智能表单实战类别(九)表单图片上传的支撑
  • 传说vue bootstrap达成图片上传图片彰显效果

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:首先我们来观察下页面上图片控件

您可能还会对下面的文章感兴趣: