實現：上傳圖片後再把圖片顯示到頁面上去
阿新 • • 發佈：2019-01-08
一樣使用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，前臺就可以使用了。