JS-wangEditor自定义上传多张图片

wangEditor是一款开源的富文本编辑器，除默认实现，还提供非常多自定义参数，看看如何自定义上传多张图片。

var E = window.wangEditor;
var editor =new E('#description');
initEditor(editor);
editor.customConfig.uploadImgServer = 'product/upload';
editor.customConfig.uploadImgHooks = {
fail:function (xhr, editor, result) {
//上传错误时触发
alert("上传图片失败");
}
};
editor.customConfig.customUploadImg = function(files, insert) {
var formData = new FormData();
for(var i = 0;i < files.length;i ++) {
formData.append("files[" + i + "]", files[i], files[i].name);
}
$.ajax({
url: rootPath + 'product/upload',
type: "POST",
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success:function(da){
if(da.errno == 0){
for(var j=0;j<da.data.length;j++){
insert(da.data[j]);
}
}else{
alert(da.msg);
return;
}
}
});
};
// 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
// 限制一次最多上传 5 张图片
editor.customConfig.uploadImgMaxLength = 30;
// 或者 var editor = new E( document.getElementById('editor') )
editor.create();

通过自定义参数customUploadImg，重写上传图片逻辑，上传成功后返回图片地址，再添加到富文本编辑框中。

最后

以上就是有魅力月饼为你收集整理的JS-wangEditor自定义上传多张图片的全部内容，希望文章能够帮你解决JS-wangEditor自定义上传多张图片所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。