這篇文章主要為大家詳細(xì)介紹了bootstrap-wysiwyg結(jié)合ajax實現(xiàn)圖片上傳實時刷新功能，感興趣的小伙伴們可以參考一下
最近由于項目需求，要實現(xiàn)一個前端文本編輯框，附帶圖片上傳實時查看的功能。比較了網(wǎng)上的幾款插件，首先是百度的UEitor，發(fā)現(xiàn)該框架過于龐大，一個小框架引入如此多的文件并不是我想看到的；其次是jQuery的easyUI，雖然個人版的是免費的，但是項目屬于公司業(yè)務(wù)，似乎用商業(yè)版的框架并不妥?？紤]到項目的前端主要就是在bootstrap的基礎(chǔ)上構(gòu)建起來的，最終選用了bootstrap-wysiwyg插件，它非常的精簡，輕巧而且擴(kuò)展性強(qiáng)。
引入bootstrap-wysiwyg并且實現(xiàn)文本編輯功能十分的便捷，但是，我注意到，圖片上傳是用fileapi實現(xiàn)的。對于大多數(shù)網(wǎng)站，雖然用FileApi實現(xiàn)無上傳預(yù)覽用戶體驗非常好，但是真正存入數(shù)據(jù)庫的時候，我們還是希望能夠存儲圖片的在服務(wù)器的靜態(tài)路徑，而并非字符串化的圖片。簡而言之，我們需要對bootstrap-wysiwyg（以下簡稱WY）做稍許改寫。
首先我們來觀察下頁面上圖片控件，其它的控件略過，查一下源碼，很容易發(fā)現(xiàn)如下代碼：
<div>
<a id="pictureBtn">
<i></i></a>
<input type="file" data-role="magic-overlay"
data-target="#pictureBtn"
data-edit="insertImage" />
</div>
做一下說明，data-role，data-target屬性是bootstrap中預(yù)定義的事件，在這里我們可以理解為布局相關(guān)，不用考慮。關(guān)鍵點來了，第三個屬性data-edit,bootstrap中并沒有這一事件，觀察bootstrap-wysiwyg.js，可以發(fā)現(xiàn)這樣一些代碼:
toolbar.find('input[type=file][data-' + options.commandRole + ']')
.change( ...
...
commandRole : 'edit',
也就是說，該屬性其實是為了方便選擇器而實現(xiàn)的，相當(dāng)于給圖片按鈕添加了監(jiān)聽器事件。
我們接著研究一下WY圖片預(yù)覽的實現(xiàn)，第一步，就像上面代碼展示的一樣，監(jiān)聽器捕捉到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)用了一個readFileIntoDataUrl方法，成功之后通過自封裝的execCommand方法實現(xiàn)將圖片輸出到文本框。該圖片其實就是一個<img>標(biāo)簽，只不過src屬性是用字符串表示的圖片。所以我們要做的其實是在監(jiān)聽器觸發(fā)之后，將文件上傳，獲得圖片的src，再把鏈接交給之后的execCommand方法。
由于筆者對Deferred并不是特別熟悉，所以還是采用更為通常的callback模式
觀察ajaxFileUpload的調(diào)用方式:
$.ajaxFileUpload({
url : ...,
secureurl : false,
fileElementId : ...,
dataType : "json",
success : function(obj) {
...
},
error : function() {
...
}
});
有兩個必選的屬性，url和fileElementId，為了保持依賴的正確性，重寫ajaxFileUpload是不可取的。但是由于WY的控件是監(jiān)聽器實現(xiàn)的，所以通過函數(shù)將參數(shù)傳過去是不現(xiàn)實的，所以我們需要自己對輸入框定義一些屬性來達(dá)到目的。
在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中定義一個函數(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);
}
});
同時對監(jiān)聽器做出一定的修改，以便拿到必要的屬性
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 = '';
});
主要是增加了兩個參數(shù)位置。
如此，改寫便完成了，注意，要確保正確執(zhí)行，請在控件之前引用ajaxFileUpload.js.
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助