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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 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
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
操作Oracle的php类
2006/10/09 PHP
PHP初学入门
2006/11/19 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
对Python函数设计规范详解
2019/07/19 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
python实现文件的分割与合并
2019/08/29 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
python如何查看网页代码
2020/06/07 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
大学学年自我鉴定
2013/10/28 职场文书
秸秆管理实施方案
2014/03/15 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
医院营销工作计划
2015/01/16 职场文书
工程项目合作意向书
2015/05/08 职场文书
Python基础之hashlib模块详解
2021/05/06 Python