1 2 3 4 5 6 wangEditor上傳圖片到伺服器 7 8 9 10 11 12 13 14 15 16 119 120 121 ...
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>wangEditor上傳圖片到伺服器</title> 7 </head> 8 9 <body> 10 11 <div id="editor"></div> 12 13 <!-- 註意， 只需要引用 JS，無需引用任何 CSS ！！！--> 14 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 15 <script type="text/javascript" src="script/wangEditor-3.1.1.js"></script> 16 <script type="text/javascript"> 17 // 聲明富文本編輯器 18 var E = window.wangEditor; 19 20 // 初始化富文本編輯器 21 var editor = new E('#editor'); 22 23 // 上傳圖片到伺服器 24 editor.customConfig.uploadImgServer = '/upload'; // 其中/upload是上傳圖片的伺服器端介面 25 26 // 將圖片大小限製為 3M 27 editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; 28 29 // 預設為 10000 張（即不限制），需要限制可自己配置 30 // 限制一次最多上傳 5 張圖片 31 editor.customConfig.uploadImgMaxLength = 5; 32 33 // 上傳圖片時可自定義傳遞一些參數，例如傳遞驗證的token等。參數會被添加到formdata中 34 editor.customConfig.uploadImgParams = { 35 // 如果版本 <=v3.1.0 ，屬性值會自動進行 encode ，此處無需 encode 36 // 如果版本 >=v3.1.1 ，屬性值不會自動 encode ，如有需要自己手動 encode 37 token: 'abcdef12345' 38 } 39 40 // 如果還需要將參數拼接到 url 中，可再加上如下配置 41 editor.customConfig.uploadImgParamsWithUrl = true; 42 43 // 上傳圖片時，可自定義filename，即在使用formdata.append(name, file)添加圖片文件時，自定義第一個參數。 44 editor.customConfig.uploadFileName = 'yourFileName'; 45 46 // 上傳圖片時刻自定義設置 header 47 editor.customConfig.uploadImgHeaders = { 48 'Accept': 'text/x-json' 49 } 50 51 // 跨域上傳中如果需要傳遞 cookie 需設置 withCredentials 52 editor.customConfig.withCredentials = true; 53 54 // 預設的 timeout 時間是 10 秒鐘 55 // 將 timeout 時間改為 3s 56 editor.customConfig.uploadImgTimeout = 3000; 57 58 // 上傳圖片的錯誤提示預設使用alert彈出，你也可以自定義用戶體驗更好的提示方式 59 editor.customConfig.customAlert = function(info) { 60 // info 是需要提示的內容 61 alert('自定義提示：' + info); 62 } 63 64 // 可使用監聽函數在上傳圖片的不同階段做相應處理 65 editor.customConfig.uploadImgHooks = { 66 before: function(xhr, editor, files) { 67 // 圖片上傳之前觸發 68 // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，files 是選擇的圖片文件 69 70 // 如果返回的結果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳 71 // return { 72 // prevent: true, 73 // msg: '放棄上傳' 74 // } 75 }, 76 success: function(xhr, editor, result) { 77 // 圖片上傳並返回結果，圖片插入成功之後觸發 78 // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是伺服器端返回的結果 79 }, 80 fail: function(xhr, editor, result) { 81 // 圖片上傳並返回結果，但圖片插入錯誤時觸發 82 // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是伺服器端返回的結果 83 }, 84 error: function(xhr, editor) { 85 // 圖片上傳出錯時觸發 86 // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象 87 }, 88 timeout: function(xhr, editor) { 89 // 圖片上傳超時時觸發 90 // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象 91 }, 92 93 // 如果伺服器端返回的不是 {errno:0, data: [...]} 這種格式，可使用該配置 94 // （但是，伺服器端返回的必須是一個 JSON 格式字元串！！！否則會報錯） 95 customInsert: function(insertImg, result, editor) { 96 // 圖片上傳並返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！） 97 // insertImg 是插入圖片的函數，editor 是編輯器對象，result 是伺服器端返回的結果 98 99 // 舉例：假如上傳圖片成功後，伺服器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片： 100 var url = result.url 101 insertImg(url) 102 103 // result 必須是一個 JSON 格式字元串！！！否則報錯 104 } 105 } 106 107 // 如果想完全自己控製圖片上傳的過程，可以使用如下代碼 108 editor.customConfig.customUploadImg = function(files, insert) { 109 // files 是 input 中選中的文件列表 110 // insert 是獲取圖片 url 後，插入到編輯器的方法 111 112 // 上傳代碼返回結果之後，將圖片插入到編輯器中 113 insert(imgUrl) 114 } 115 116 // 創建編輯器1 117 editor.create(); 118 </script> 119 </body> 120 121 </html>
