bootstrap-wysiwyg如何上传图片到服务端

yukjin 发布于 2014/08/28 16:01
阅读 7K+
收藏 1

【Gopher China万字分享】华为云的Go语言云原生实战经验!>>>

想使用 bootstrap-wysiwyg实现图文混合文章的上传,文章内容可以直接上传div中的内容,我想请问使用 bootstrap-wysiwyg中的插入图片后图片显示在了文章里,请问怎么将其上传?
加载中
0
Nick_路
Nick_路

一个月的时间..不知卤煮解决了木有.. 

我最近也在研究
有两种方式解决. 

1. wysiwyg 会将图片读取为base64直接写在img的src中, 所以可以直接不处理上传, 直接将html内容提交. 缺点就是, 数据库中的text 类型也不够存储一张图片, 会占用大量数据库空间

2.在选择文件时,记录选择的文件 . 提交时,将文件以wysiwyg同样的方式读取, 并完成上传, 替换url. 
代码片段如下:

<a id="pictureBtn" class="btn" data-edit="image" title="上传图片">
    <span class="glyphicon glyphicon-picture"></span>&nbsp;图片
</a>
<input id="picture-select" type="file" data-role="magic-overlay"
       data-target="#pictureBtn"
       data-edit="insertImage" accept="image/*" multiple/>



var uploadFiles = [];
$("#picture-select").change(function () {
    $.each(this.files, function (index, fileObj) {
        uploadFiles.push(fileObj);
    });
});

$('#editor').wysiwyg();


// 点击提交后处理: 
for (var i = 0; i < uploadFiles.length; i++) {
    var fileObj = uploadFiles[i];
    // 判断图片是否存在
    readFileIntoDataUrl(fileObj).done(function (dataUrl) {
        var imgTag = $("#editor").find("img[src='" + dataUrl + "']");
        if (imgTag.length > 0) {
            // 图片存在, 上传当前文件.
            // uploadImage方法为你的上传图片方法.
            var url = uploadImage(fileObj);
            imgTag.attr("src", url);

        }
    });
}



wysiwyg 中读取图片的代码: 
var readFileIntoDataUrl = function (fileInfo) {
    var loader = $.Deferred(),
        fReader = new FileReader();
    fReader.onload = function (e) {
        loader.resolve(e.target.result);
    };
    fReader.onerror = loader.reject;
    fReader.onprogress = loader.notify;
    fReader.readAsDataURL(fileInfo);
    return loader.promise();
};






Nick_路
Nick_路
哦.. 忘记说了.. 也可以更改 bootstrap-wysiwyg 的源码 insertFiles方法, 在源码的第83行.
0
铂金便便
铂金便便

引用来自“_____小路”的评论

一个月的时间..不知卤煮解决了木有.. 

我最近也在研究
有两种方式解决. 

1. wysiwyg 会将图片读取为base64直接写在img的src中, 所以可以直接不处理上传, 直接将html内容提交. 缺点就是, 数据库中的text 类型也不够存储一张图片, 会占用大量数据库空间

2.在选择文件时,记录选择的文件 . 提交时,将文件以wysiwyg同样的方式读取, 并完成上传, 替换url. 
代码片段如下:

<a id="pictureBtn" class="btn" data-edit="image" title="上传图片">
    <span class="glyphicon glyphicon-picture"></span>&nbsp;图片
</a>
<input id="picture-select" type="file" data-role="magic-overlay"
       data-target="#pictureBtn"
       data-edit="insertImage" accept="image/*" multiple/>



var uploadFiles = [];
$("#picture-select").change(function () {
    $.each(this.files, function (index, fileObj) {
        uploadFiles.push(fileObj);
    });
});

$('#editor').wysiwyg();


// 点击提交后处理: 
for (var i = 0; i < uploadFiles.length; i++) {
    var fileObj = uploadFiles[i];
    // 判断图片是否存在
    readFileIntoDataUrl(fileObj).done(function (dataUrl) {
        var imgTag = $("#editor").find("img[src='" + dataUrl + "']");
        if (imgTag.length > 0) {
            // 图片存在, 上传当前文件.
            // uploadImage方法为你的上传图片方法.
            var url = uploadImage(fileObj);
            imgTag.attr("src", url);

        }
    });
}



wysiwyg 中读取图片的代码: 
var readFileIntoDataUrl = function (fileInfo) {
    var loader = $.Deferred(),
        fReader = new FileReader();
    fReader.onload = function (e) {
        loader.resolve(e.target.result);
    };
    fReader.onerror = loader.reject;
    fReader.onprogress = loader.notify;
    fReader.readAsDataURL(fileInfo);
    return loader.promise();
};






干得漂亮!!!
0
B
BYQ倩
你好,bootstrap-wysiwyg是怎么样配置的呢? 它的工具栏的选项都是要自己用代码实现的吗?
0
s
siliningde
uploadImage 是怎么写的呀?直接调用后台的action吗,这个是不是用ajax方式比较好啊,但是文件类型ajax能带过去数据吗??
返回顶部
顶部