wangEditor3使用AJAX异步上传图片

来源：互联网发布：linux恢复删除的文件夹编辑：程序博客网时间：2024/05/20 18:16

HTML：

<form  class="form form-horizontal" id="form-member-add" method="post" enctype="multipart/form-data"><input type="hidden"  value="${id }"  id="id" name="id" ><div class="row cl" style="margin: 20px;"><span class="c-red">*</span>标题：<input type="text" class="input-text radius"   id="title" name="title" ></div><div class="row cl" style="margin: 20px;"><span class="c-red">*</span>内容：<div id="edit"></div></div><div class="row cl"><div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3"> <input class="btn btn-primary radius" type="button" value="  提交  " onclick="subm(${type})" style="margin-left: 170px"> </div></div></form>

JS：

<script type="text/javascript"> function subm(type){var id=document.getElementById('id').value;var title = document.getElementById('title').value;var content = editor.txt.html();if(title==""||content==""){layer.msg('请把内容填写完整！',{icon:2,time:1000});return false;}          $.ajax({type : "post",url : "newsAddPage.action",data : {"id":id,"title" : title,"content" : content,"type":type},success : function(result) {layer.msg('添加成功!',{icon:1,time:1000});},error : function(data) {$.Huimodalalert('修改失败！', 2000);}});  } </script> <script type="text/javascript">    var E = window.wangEditor    var editor = new E('#edit')           editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片                         // 隐藏“网络图片”tab    editor.customConfig.showLinkImg = false    editor.customConfig.menus = [    'head',  // 标题    'bold',  // 粗体    'italic',  // 斜体    'underline',  // 下划线    'foreColor',  // 文字颜色    'backColor',  // 背景颜色    'list',  // 列表    'justify',  // 对齐方式    'quote',  // 引用    'image',  // 插入图片    'table',  // 表格    'undo',  // 撤销    'redo'  // 重复    ]    editor.create()</script>

图片被转化为BASE64格式保存在了content里，在Controller中接收即可

图片保存在数据库中的格式为

<p><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAMDBBADASIAAhEBAxEB/8QAGgAAAwEBAQEAAAAAAAAAAAAAAAECAwQFBv/EABcBAQEBAQAAAAAAAAAAAAAAAAABAgP/2gAMAwEAAhADEAAAAfUMq59Wxw6kSoZWT1QqlGtZMtSgmqMDoDneqlTJKMwp5I3eFGqGZ59Icx0IxW2a1eLkqBW3UQnQc+4qoTOdwwjeVwOoOU3RjrIamAlxKBsthbzJiauszSSVWasVpNChqhU4k2MROiYa3ndxFkghU3MpsRquc3KNpjU6GbtBFoNJJazcFJJWt0mbtCBJTzYJ0ZGzXBb5pNotI1SZTtkvQ5KsmoFcjalNTNVqZI1eQbEBYiCakCWaEybVhoNyipKM8+mV53uGD0kEpjR5VVqXDJolaBlTDQyk3nJG751X…………" style="max-width:100%;"><br></p>

若要在html中显示出来，直接将这个值传到前端，即可显示

阅读全文

0 0