編輯器的圖片上傳

  忙活了好幾天都在弄圖片上傳的問題。一直不能完美的解決點擊上傳圖片，然後圖片上傳至後臺接下來選擇刪除這個圖片還是插入圖片。點擊刪除就在後臺刪除這張圖片，點擊插入就清空上傳列表將圖片插入到文本編輯器。

  考慮到自己對這邊的文件上傳和下載不熟悉，使用的是jquery的file-upload這個插件，感覺起來爲了在頁面上傳一張圖片而使得工作複雜化了。如果是自己寫的話應該能夠更簡便的實現文件上傳和引用功能，但是作爲菜鳥先得學會用工具再去考慮工具的實現不是。因爲後臺是nodejs，所以找了一款file-upload這個插件的服務器端組件jquery-file-upload-middleware，這個插件有個例子npm install之後就可以使用。照着例子將插件搬入自己的app中。實現客戶端的上傳程序。

  爲了防止自己的App.js文件太過雜亂，將upload的模塊放入modules文件夾中，而在App.js中添加upload(app)。upload的代碼是直接取自example中的，具體如下

var upload = require('jquery-file-upload-middleware');
var resizeConf = require('../config').resizeVersion;
var dirs = require('../config').directors;

//提供對外的接口
module.exports = function (app) {
    //上傳代碼
    app.use('/upload/location', upload.fileHandler({
        tmpDir: dirs.temp,
        uploadDir: __dirname + dirs.location,
        uploadUrl: dirs.location_url,
        imageVersions: resizeConf.location
    }));
    // 監聽文件上傳成功的代碼
    upload.on('end', function (fileInfo) {
        // insert file info
        console.log("files upload complete");
        console.log(fileInfo);
    });
    //刪除文件的監聽
    upload.on('delete', function (fileName) {
        // remove file info
        console.log("files remove complete");
        console.log(fileName);
    });
    //出錯監聽
    upload.on('error', function (e) {
        console.log(e.message);
    });
}

在配置的config文件如下

/**
 * Created by Administrator on 14-3-17.
 */
exports.resizeVersion = {
    default: {
        thumbnail:{
            width:80,
            height:"80!"
        },
        small: {
            width:200,
            height:"150!"
        },
        medium:{
            width:400,
            height:300
        },
        large: {
            width: 800,
            height: 600
        }
    },
    location : {
        thumbnail:{
            width:80,
            height:"80^",
            imageArgs: [
                "-gravity", "center",
                "-extent", "80x80"
            ]
        },
        small: {
            width:"200",
            height:"150^",
            imageArgs: [
                "-gravity", "center",
                "-extent", "200x150"
            ]
        },
        medium:{
            width:400,
            height:300
        },
        large: {
            width: 800,
            height: 600
        }
    }
};

exports.directors = {
    temp: './temp',

    default: '/../public/uploads/default',
    default_url: '/../uploads/default',

    location: '/../public/uploads/location',
    location_url: '/../uploads/location'
};

暫時還是有很多不理解的配置，不過先讓組件能動纔是最重要的。

前臺我用的是bootstrap-wysiwyg的富文本編輯器。前臺的圖片點擊之後上傳的功能使用了bootstrap的Modal的js組件。圖片上傳的組件是jquery-file-upload，修改一下jquery-fileupload-ui的內容讓其能夠監聽insert的事件，圖片上傳之後可選擇插入或者刪除

_initEventHandlers: function () {
    this._super();
    this._on(this.options.filesContainer, {
        'click .start': this._startHandler,
        'click .cancel': this._cancelHandler,
        'click .delete': this._deleteHandler,
        'click .insert': this._insertHandler
         });
    this._initButtonBarEventHandlers();
},
-----------insert---------------
//插入圖片的回調
insert: function(e, data){
   document.execCommand('insertimage', 0, data.url);
   }
----------_insertHandler--------------
_insertHandler: function(e) {
    e.preventDefault();
    var button = $(e.currentTarget);
    this._trigger('insert', e, button.data());
  },
-------------initButtonBarEventHandlers
this._on(fileUploadButtonBar.find('.insert'), {
    click: function (e) {
        e.preventDefault();
        filesList.find('.insert').click();
     }
});

頁面的HTML編寫如下

pictureBtn

<a  href="#myModal" class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn" data-toggle="modal"><i class="icon-picture"></i></a>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-header">
		<span class="btn btn-success fileinput-button"> <i class="icon-plus"></i> <span>Add files...</span>
			<input id="fileupload" type="file" name="files[]" multiple="">
		</span>
	</div>
	<div class="modal-body">
		<div id="files" class="files"></div>
	</div>
</div>

editor

<div id="editor"></div>

fileupload的初始化和jquery-file-upload-middleware前臺的例子基本類似,需要修改插入的html部分

上傳功能的最終效果如下:

雖然還有很多問題,但是基本的上傳是完成了.上傳輸入框沒有文字時候無法插入圖片的bug還有圖片大小的調整等等各種問題 畢竟初寫沒有經驗,需要慢慢摸索怎麼寫下去.

邊寫邊記着