实现：上传图片后再把图片显示到页面上去

来源：互联网发布：nlp领域算法编辑：程序博客网时间：2024/05/21 09:51

一样使用kindeditor。

本来是想用ajaxFileupload来做上传，然后再把图片显示到页面上去，但是弄了半天，卡壳了。在ie10上测试的时候根本就不能读取ajaxFileupload.js文件。

百度也查了，上面说这是因为ie版本问题。但是改了版本问题，最后还是有问题存在，最后只有舍弃了他。还是用kindeditor来做上传图片并实现前台预览。

还是一样，在example中找到上传图片的例子。

copy：

<!doctype html><html><head><meta charset="utf-8" /><title>ImageDialog Examples</title><link rel="stylesheet" href="../themes/default/default.css" /><script src="../kindeditor.js"></script><script src="../lang/zh_CN.js"></script><script>KindEditor.ready(function(K) {var editor = K.editor({allowFileManager : true});K('#image1').click(function() {editor.loadPlugin('image', function() {editor.plugin.imageDialog({imageUrl : K('#url1').val(),clickFn : function(url, title, width, height, border, align) {K('#url1').val(url);editor.hideDialog();}});});});K('#image2').click(function() {editor.loadPlugin('image', function() {editor.plugin.imageDialog({showLocal : false,imageUrl : K('#url2').val(),clickFn : function(url, title, width, height, border, align) {K('#url2').val(url);editor.hideDialog();}});});});K('#image3').click(function() {editor.loadPlugin('image', function() {editor.plugin.imageDialog({showRemote : false,imageUrl : K('#url3').val(),clickFn : function(url, title, width, height, border, align) {K('#url3').val(url);editor.hideDialog();}});});});});</script></head><body><p><input type="text" id="url1" value="" /> <input type="button" id="image1" value="选择图片" />（网络图片 + 本地上传）</p><p><input type="text" id="url2" value="" /> <input type="button" id="image2" value="选择图片" />（网络图片）</p><p><input type="text" id="url3" value="" /> <input type="button" id="image3" value="选择图片" />（本地上传）</p></body></html>

当点击选择图片时加载该js。然后复制imageDialog，在image.js查找它，会发现里面跟这差不多的东西。这时就应该懂了，upload_json.jsp设置url,title,width,height,order,align，前台就可以使用了。

0 5