Kindeditor单独调用单图上传增加预览

最新推荐文章于 2021-11-10 17:10:36 发布

转载最新推荐文章于 2021-11-10 17:10:36 发布 · 438 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=h102habab&title=Kindeditor%E5%8D%95%E7%8B%AC%E8%B0%83%E7%94%A8%E5%8D%95%E5%9B%BE%E4%B8%8A%E4%BC%A0%E5%A2%9E%E5%8A%A0%E9%A2%84%E8%A7%88

文章标签：

#富文本编辑器

前端专栏收录该内容

493 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现图片上传并实时预览的方法。通过点击按钮，用户可以选择图片，所选图片将立即显示在页面上，便于用户确认上传前的选择。这一功能在网页设计中十分常见，尤其在需要用户上传头像或产品图片的场景下。

html代码：

JS代码：

K('#image1').click(function() {
editor.loadPlugin('image', function() {
editor.plugin.imageDialog({
showRemote : false,
imageUrl : K('#url1').val(),
clickFn : function(url, title, width, height, border, align) {
$("#licensecheck").html("");
var div = K('#J_imageView1');
div.html('');
div.append('<img src="' url '">');
K('#url1').val(url);
editor.hideDialog();
}
});
});
});