summernote.js實際運用中遇到的上傳圖片大小控制及bootstrap模態(tài)框嵌套關(guān)閉這兩個問

madthumb 發(fā)布于2019-08-26 10:45 / 3840人閱讀

摘要：需求控制編輯框上傳的圖片不超過。從文件中找到如下圖代碼位置，選取需要上傳的圖片，獲取圖片的大小，將其當(dāng)做新增參數(shù)，給標(biāo)簽新增屬性。我的解決方法就是將在中加載出來的模態(tài)框中，關(guān)閉按鈕的屬性替換成代碼的事件，用來隱藏模態(tài)框，如下圖所示。

這里先看一下summernote.js模樣，如下圖，可以添加圖片、視頻、鏈接等。

問題一：summernote.js在編輯框里具體是否有限制圖片的大小，這個我也沒有仔細(xì)研究，我只針對我的需求進(jìn)行了修改。

需求：控制編輯框上傳的圖片不超過10M。

從summernote.js文件中找到如下圖代碼位置，選取需要上傳的圖片，獲取圖片的大小，將其當(dāng)做新增參數(shù)（size），給img標(biāo)簽新增data-filesize屬性。

在編輯框添加完圖片之后，生成的HTML就如下圖所示。

獲取img標(biāo)簽的data-filesize屬性，求編輯框中所有圖片的大小，判斷一下即可。

上面的操作是判斷編輯框中添加的所有圖片的大小不超過10M

下面如圖，在選擇圖片的時候添加如下判斷，只是對本次上傳的單張或多張圖片的大小進(jìn)行判斷

問題二：summernote.js與bootstrap模態(tài)框嵌套，關(guān)閉子模態(tài)框的同時，父模態(tài)框也關(guān)閉的問題

如下圖所示，當(dāng)點擊子模態(tài)框的關(guān)閉按鈕時，連同父模態(tài)框也一同關(guān)閉。

我的解決方法就是將在summernote.js中加載出來的模態(tài)框中，‘關(guān)閉’按鈕的data-dimiss屬性替換成js代碼的click事件，用a.modal("hide")來隱藏模態(tài)框，如下圖所示。

GPU云服務(wù)器云服務(wù)器 bootstrap模態(tài)窗口上傳及顯示圖片php 上傳到云服務(wù)器圖片及視頻上傳資料圖片大小限制

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106715.html

相關(guān)文章

summernote編輯器插件使用筆記

摘要：由于需要的編輯器功能比較簡單，不需要太多復(fù)雜功能，所以選擇了一款特別輕量的插件，而且后臺操作也很簡單。關(guān)于圖片上傳提交按鍵等回調(diào)函數(shù)也是在中，詳見部分。初始化一個編輯器很簡單。這次項目中需要用到編輯器插件，于是上網(wǎng)查了一下。由于需要的編輯器功能比較簡單，不需要太多復(fù)雜功能，所以選擇了一款特別輕量的summernote插件，而且后臺操作也很簡單。官網(wǎng)：http://summernote...

printempw 2019-08-19 18:18 評論0 收藏0
JavaScript 資源大全中文版

摘要：官網(wǎng)全新的靜態(tài)包管理器。官網(wǎng)一個整合和官網(wǎng)的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。官網(wǎng)小巧的兼容的所見即所得的富文本編輯器。官網(wǎng)富文本編輯器。官網(wǎng)由制作，適用于每天寫作的富文本編輯器。 1. 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。 npm：npm 是 javascript 的包管理器。官網(wǎng) cnpm：cnpm 是由于國...

jzman 2019-08-23 17:18 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉(zhuǎn)載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉(zhuǎn)載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 評論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優(yōu)雅且功能豐富的模板引擎。完整的經(jīng)過充分測試和記錄數(shù)據(jù)結(jié)構(gòu)的庫。【導(dǎo)讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發(fā)起維護(hù)的 JS 資源列表...

cfanr 2019-08-20 10:34 評論0 收藏0