如何提交 bootstrap wysiwyg的内容
发布网友
发布时间：2022-04-27 11:08
共3个回答
热心网友
时间：2022-05-18 14:29
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> 图片
</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();
};
热心网友
时间：2022-05-18 15:47
