summernote编辑器批量上传图片

首先布置编辑器 <link href="__CSS__/plugins/summernote/summernote.css" rel="stylesheet"> <link href="__CSS__/plugins/summernote/summernote-bs3.css" rel="stylesheet"><form method="post" class="form-horizontal" action="/admin/worksmanage/worksaddprocess" enctype="multipart/form-data"><div class="summernote"></div> //编辑器的容器</form><button onclick="saveform()" class="btn btn-primary"><i class="fa fa-save"></i> 保存</button> <!-- SUMMERNOTE --> <script src="__JS__/plugins/summernote/summernote.min.js"></script> <script src="__JS__/plugins/summernote/summernote-zh-CN.js"></script>
<script> $(document).ready(function () { //初始化编辑器 $('.summernote').summernote({ lang: 'zh-CN', height: 200, //默认是base64上传，现在改为选中图片后则异步上传到服务器 onImageUpload: function(files, editor, welEditable) { var files_length = files.length; //此处循环上传每一个图片 for(var i=0;i<files_length;i++){ sendFile(files[i], editor, welEditable); } }, });//$('.summernote').code(''); //编辑器初始化后默认有一些p元素，此处为清空编辑器，在编辑页面则不需要此操作 }); //异步批量上传图片 function sendFile(file, editor, welEditable) { data = new FormData(); data.append("file", file); $.ajax({ data: data, type: "POST", url: "/admin/worksmanage/imageupload", //服务器端上传方法 cache: false, contentType: false, processData: false, success: function(url) { $(".note-editable").append(url); //将服务器返回的值加入编辑器容器里 } }); } //在点击提交按钮之前，将编辑器所有内容赋值于一个隐藏元素，方便服务器端接收编辑器内容 var saveform = function(){ var $form = $("form.form-horizontal"); var editor = "<input type='hidden' name='content' value='" + $('.summernote').code() + "' />"; $form.append(editor); $form.submit(); };
ps:注意去把编辑器的上传选框改为可以多选（将plugins/summernote/summernote.min.js里的<input class="note-image-input" type="file" name="files" accept="image/*" /> 改为 <input class="note-image-input" type="file" name="files" accept="image/*" multiple />，增加了一个multiple即可以多选了）