bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能


Posted in Javascript onMay 27, 2016

最近由于项目需求,要实现一个前端文本编辑框,附带图片上传实时查看的功能。比较了网上的几款插件,首先是百度的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个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 文件传参及处理技巧分析
May 13 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 #Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 #Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 #Javascript
Bootstrap安装环境配置教程分享
May 27 #Javascript
Bootstrap布局方式详解
May 27 #Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 #Javascript
JS组件Bootstrap Table布局详解
May 27 #Javascript
You might like
拼音码表的生成
2006/10/09 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
Python 序列的方法总结
2016/10/18 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
详解python读取image
2019/04/03 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
电大本科自我鉴定
2014/02/05 职场文书
政治思想表现评语
2014/05/04 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
孔繁森观后感
2015/06/10 职场文书
新闻通讯稿模板
2015/07/22 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫
教你部署vue项目到docker
2022/04/05 Vue.js