如何提交 bootstrap wysiwyg的内容

以上传的图片为例

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()</ol>// 点击提交后处理:

for (var i = 0i <uploadFiles.lengthi++) {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.rejectfReader.onprogress = loader.notifyfReader.readAsDataURL(fileInfo)return loader.promise()}

建议使用MVC模式做，JSP页面提交相应的 *** 作后，提交给Servlet，Servlet中调用Model中定义的增删改查方法，方法调用后返回结果，然后通过Servlet返回给JSP页面。对于前台的增删改查跟数据库中中新建查询的 *** 作是一样的，只是JSP页面增删改查是调用数据库查询语句封装的函数方法而已！

---