bootstrap-wysiwyg整合ajaxFileUpload實現圖片實時上傳刷新

筆者最近因爲項目需求，要實現一個前端文本編輯框，附帶圖片上傳實時查看的功能。比較了網上的幾款插件，首先是百度的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

2016年1月14日 15:07:59更新：

今天在用的時候發現一個問題，即圖片只能上傳一次的問題，這是ajaxFileUpload.js的問題，解決方案：

ajaxfileupload.js原文第41行：

var newElement = jQuery(oldElement).clone();

改成:

var newElement = jQuery(oldElement).clone(true);

緣由是ajaxFileUpload默認複製元素而不復制元素事件致使WY的監聽器change失效。

另，附上$.Deferred對象的改寫方法：

//原文第6行
var uploadFileToServer = function(id, action) {
		var loader = $.Deferred();
		$.ajaxFileUpload({
			url : action,
			secureurl : false,
			fileElementId : id,
			dataType : 'json',
			success : function(json) {
				if (json.status) {
					loader.resolve(json.imgsrc);
				} else {
					loader.reject('server-internal-exception', json.message);
				}
			},
			error : function() {
				loader.reject('upload-failure', '');
			}
		});
		return loader.promise();
	}
	
	//原文100行附近
	insertFiles = function(files, id, action) {
			editor.focus();
			$.each(files,
					function(index, file) {
						if (/^image\//.test(file.type)) {
							$.when(uploadFileToServer(id, action)).done(
									function(src) {
										execCommand('insertimage', src);
									}).fail(function(e, message) {
								options.fileUploadError(e, message);
							});
						} else {
							options.fileUploadError("unsupported-file-type",
									file.type);
						}
					});