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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
Js sort排序使用方法
Oct 17 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 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获取网络文件的实现代码
2010/01/01 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
javascript调试说明
2010/06/07 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
详解【python】str与json类型转换
2019/04/29 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
事业单位辞职信范文
2014/01/19 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers
解决Oracle数据库用户密码过期
2022/05/11 Oracle