這篇文章主要為大家詳細(xì)介紹了bootstrap-wysiwyg結(jié)合ajax實(shí)現(xiàn)圖片上傳實(shí)時(shí)刷新功能，感興趣的小伙伴們可以參考一下

最近由于項(xiàng)目需求，要實(shí)現(xiàn)一個(gè)前端文本編輯框，附帶圖片上傳實(shí)時(shí)查看的功能。比較了網(wǎng)上的幾款插件，首先是百度的UEitor，發(fā)現(xiàn)該框架過(guò)于龐大，一個(gè)小框架引入如此多的文件并不是我想看到的；其次是jQuery的easyUI，雖然個(gè)人版的是免費(fèi)的，但是項(xiàng)目屬于公司業(yè)務(wù)，似乎用商業(yè)版的框架并不妥。考慮到項(xiàng)目的前端主要就是在bootstrap的基礎(chǔ)上構(gòu)建起來(lái)的，最終選用了bootstrap-wysiwyg插件，它非常的精簡(jiǎn)，輕巧而且擴(kuò)展性強(qiáng)。

引入bootstrap-wysiwyg并且實(shí)現(xiàn)文本編輯功能十分的便捷，但是，我注意到，圖片上傳是用fileapi實(shí)現(xiàn)的。對(duì)于大多數(shù)網(wǎng)站，雖然用FileApi實(shí)現(xiàn)無(wú)上傳預(yù)覽用戶體驗(yàn)非常好，但是真正存入數(shù)據(jù)庫(kù)的時(shí)候，我們還是希望能夠存儲(chǔ)圖片的在服務(wù)器的靜態(tài)路徑，而并非字符串化的圖片。簡(jiǎn)而言之，我們需要對(duì)bootstrap-wysiwyg（以下簡(jiǎn)稱WY）做稍許改寫。

首先我們來(lái)觀察下頁(yè)面上圖片控件，其它的控件略過(guò)，查一下源碼，很容易發(fā)現(xiàn)如下代碼：

<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>

做一下說(shuō)明，data-role，data-target屬性是bootstrap中預(yù)定義的事件，在這里我們可以理解為布局相關(guān)，不用考慮。關(guān)鍵點(diǎn)來(lái)了，第三個(gè)屬性data-edit,bootstrap中并沒(méi)有這一事件，觀察bootstrap-wysiwyg.js，可以發(fā)現(xiàn)這樣一些代碼:

toolbar.find('input[type=file][data-' + options.commandRole + ']')

     .change( ...

     ...

commandRole : 'edit',

也就是說(shuō)，該屬性其實(shí)是為了方便選擇器而實(shí)現(xiàn)的，相當(dāng)于給圖片按鈕添加了監(jiān)聽(tīng)器事件。

我們接著研究一下WY圖片預(yù)覽的實(shí)現(xiàn)，第一步，就像上面代碼展示的一樣，監(jiān)聽(tīng)器捕捉到fileInput的change事件，做出響應(yīng)，調(diào)用insertFiles函數(shù)

restoreSelection();

if (this.type === 'file' && this.files && this.files.length > 0) {

 insertFiles(this.files);

}

saveSelection();

his.value = '';

找到insertFiles函數(shù)

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()方法，先調(diào)用了一個(gè)readFileIntoDataUrl方法，成功之后通過(guò)自封裝的execCommand方法實(shí)現(xiàn)將圖片輸出到文本框。該圖片其實(shí)就是一個(gè)<img>標(biāo)簽，只不過(guò)src屬性是用字符串表示的圖片。所以我們要做的其實(shí)是在監(jiān)聽(tīng)器觸發(fā)之后，將文件上傳，獲得圖片的src，再把鏈接交給之后的execCommand方法。

由于筆者對(duì)Deferred并不是特別熟悉，所以還是采用更為通常的callback模式

觀察ajaxFileUpload的調(diào)用方式:

$.ajaxFileUpload({

    url : ...,

    secureurl : false,

    fileElementId : ...,

    dataType : "json",

    success : function(obj) {

     ...

    },

    error : function() {

     ...

    }

   });

有兩個(gè)必選的屬性，url和fileElementId，為了保持依賴的正確性，重寫ajaxFileUpload是不可取的。但是由于WY的控件是監(jiān)聽(tīng)器實(shí)現(xiàn)的，所以通過(guò)函數(shù)將參數(shù)傳過(guò)去是不現(xiàn)實(shí)的，所以我們需要自己對(duì)輸入框定義一些屬性來(lái)達(dá)到目的。

在fileInput中添加一些屬性

<input type="file" id="pictureInput" name="picture"

     data-role="magic-overlay" data-target="#pictureBtn"

     data-edit="insertImage" action="..." />

id 用作 fileElementId,name屬性也是必須的，主要是為了后臺(tái)取值指名，action是圖片需要提交到的url

在bootstrap-wysiwyg.js中定義一個(gè)函數(shù)名為uploadFileToServer,函數(shù)格式如下:

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);

    }

   });

同時(shí)對(duì)監(jiān)聽(tīng)器做出一定的修改，以便拿到必要的屬性

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 = '';

       });

主要是增加了兩個(gè)參數(shù)位置。

如此，改寫便完成了，注意，要確保正確執(zhí)行，請(qǐng)?jiān)诳丶耙胊jaxFileUpload.js.

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助