编辑器的图片上传

  忙活了好几天都在弄图片上传的问题。一直不能完美的解决点击上传图片，然后图片上传至后台接下来选择删除这个图片还是插入图片。点击删除就在后台删除这张图片，点击插入就清空上传列表将图片插入到文本编辑器。

  考虑到自己对这边的文件上传和下载不熟悉，使用的是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还有图片大小的调整等等各种问题 毕竟初写没有经验,需要慢慢摸索怎么写下去.

边写边记着