• 写文章的框就是一个 textarea 而且是Markdown写作,所以木有富文本编辑器,但是传个图还得手动打开 sftp ,上传好图片之后拼好地址再写到文章里,这个就非常麻烦,但是为了页面整洁也不想增加传图片的按钮,所以就将图片拖入文本框进行上传。

    ##效果

    ##代码

    HTML:

    <textarea id="editor"></textarea>
    

    客户端 JS :

    $("#editor").bind({
        dragover: function (ev) {
            $(this).addClass('hover');
            ev.preventDefault();
            return false;
        },
        dragend: function () {
            $(this).removeClass('hover');
            return false;
        },
        dragleave: function () {
            $(this).removeClass('hover');
            return false;
        },
        drop: function (ev) {
            ev.preventDefault();
            var file = ev.originalEvent.dataTransfer.files[0]; //获取拖入的第一个文件
            var reader = new FileReader();
            reader.onloadend = function () { //文件读取完成时
    
                $(ev.currentTarget).val($(ev.currentTarget).val() + "\n [ 正在为您上传 ]");
                $.ajax({
                    url: 'admin/upload/base64',
                    type: 'POST',
                    success: function(data){
                        var str = $(ev.currentTarget).val();
    
                        var img = '<img src="http://img0.tycdn.net/' + data + '!mini">';
                        var href = '<a href="http://img0.tycdn.net/' + data + '">' + img + '</a>';
                        str = str.replace("[ 正在为您上传 ]", href);
    
                        $(ev.currentTarget).val(str);//插入图片代码
                    },
                    error: function(){
                        var str = $(ev.currentTarget).val();
                        str = str.replace("[ 正在为您上传 ]", "[ 图片上传失败 ]");//上传失败时
                        $(ev.currentTarget).val(str);
                    },
                    // Form data
                    data:{
                        "imgstr":reader.result
                    },
                });
            }
    
            reader.readAsDataURL(file);//读取文件
            return false;
        }
    });
    

    服务器 JS:

    app.post('/admin/upload/base64', function(req, res) {
       if(cache.get(req.cookies.ADMINSESSION) != true){ //检测是否已登录
          res.send("-1");
       }else{
          var str = req.param('imgstr');
          var matches = str.match(/^data:image\/([A-Za-z-+\/]+);base64,(.+)$/); //匹配base64图片
    
          if (matches.length !== 3) { //不是base64图片返回错误
            res.status(500);
            res.send("-2");
          }
    
          var filetype = matches[1].replace("x-icon","ico");
          filetype = filetype.replace("jpeg","jpg"); //修正拓展名
    
    
          var data = new Buffer(matches[2], 'base64');
    
          var filename = Date.now() + '.' + filetype; //文件名
    
          fs.writeFile(__dirname + '/public/images/' + filename, data, function(err) { 
                if(err){
                    res.status(500);
                    res.send("-3");
                }
                res.send("images/" + filename); //返回图片地址
          });
       }
    });