bootstrap-wysiwyg結合ajax實現圖片上傳即時重新整理功能_javascript技巧

最近由於項目需求，要實現一個前端文本編輯框，附帶圖片上傳即時查看的功能。比較了網上的幾款外掛程式，首先是百度的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個精彩的專題：

Bootstrap學習教程

Bootstrap實戰教程

Bootstrap外掛程式使用教程

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。