这篇文章主要为大家详细介绍了bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能，感兴趣的小伙伴们可以参考一下

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

以上就是本文的全部内容，希望对大家的学习有所帮助