jQuery – JavaScript – 教你如何製作圖片上傳前的預覽圖

* 如果您想要用套件可以來這篇 (2017/03/07更新)

 

目標

  1. 讓使用者在上傳圖片前先顯示在頁面,用來確定是不是要上傳的圖片。
  2. 透過前端技術完成,不使用網路傳輸到伺服器做縮圖後回傳到前端。

解決方法

使用 Web APIs 的 FileReader (檔案讀取器) 來達到。關於 FileReader 的用法,可參考說明

線上測試

HTML

JavaScript/jQuery

解說

當 input.upl[type=file] 發生改變的時候會觸發我們自訂的 preview 方法。

我們看 preview 方法怎麼寫

其中要顯示的檔案大小,會須要做運算的轉換,我們額外包了一個 format_float 的方法

如果須要多圖預覽,請參考進階的 下一篇文章

這邊的範例比較簡單,只能做一張圖片的預覽。

參考

php – 在屬性 src 使用 data url 的寫法

 

jQuery – TinyMCE 網址轉換設定

TinyMCE 對於同 domain 以 http 開頭的絕對網址,預設會雞婆地作 url 相對路徑的轉換
TinyMCE 提供 3 + 1 組選項設定,可供自由運用組合。

當 convert_urls 為 true 時 (預設值),底下 3 組可交互使用
relative_urls 布林值,預設為 true
remove_script_host 布林值,預設為 true
document_base_url 字串值,預設為當前程式的路徑
或單獨將 convert_urls 設定為 false 關閉網址轉換

參考:Paths/URLs are incorrect, I want absolute/relative URLs?
http://tinymce.moxiecode.com/wiki.php/TinyMCE_FAQ#Paths.2FURLs_are_incorrect.2C_I_want_absolute.2Frelative_URLs.3F

參考:URL conversion
http://tinymce.moxiecode.com/tryit/url_conversion.php

 

 

 

轉自:http://www.doubleservice.com/2011/02/tinymce-convert-urls/

jquery – masonry瀑布流,並使用imagesLoaded 避免覆蓋圖片

現在改版後的masonry說明的清楚多了
http://masonry.desandro.com/appendix.html

目前我介紹的版本是 v3.1.2

官方說明滿清楚的,我這邊使用jQuery介紹

下載http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js 並插入到你的網頁中
插入以下範例

主要重點在於使用imagesLoaded,
可以當圖片下載完畢後,才執行masonry渲染,確保DIV不會被圖片覆蓋。
可參考說明:http://masonry.desandro.com/appendix.html
裡面有外掛 imagesLoaded 的載點~