jQuery – 使用套件 file-preview.js 簡單顯示預覽圖

之前教過 2 種預覽圖都是原理,從發佈以來有很高的流量都在看這兩篇:

但覺得看這些文字連我都覺得有點囉嗦XD 剛好最近突然寫了幾個類似功能,於是順手做了一個 jQuery 套件,大家直接下載來放到自己的專案吧。

以後大概連我自己都不會再點進去上面兩篇了吧 XDD

前往 Github 下載

HTML 大概長這樣

這邊是用 <div> 取代 <img> 這樣圖片才能適應不同寬高,不至於變形。不懂得可以網路 Google 一下囉。

最快的方法就這麼寫

記得選擇器 $() 中間為空喔。但如果你需要在 on() 事件中更自訂化一點,我建議這麼寫

上面用 $(_this) 主要是因為一個頁面可能會有 1 個以上的 form 喔!如果直接 $(“.img") 去尋找會彼此表單互相影響啦,所以養成以組件的根源為節點的好習慣 😀

上面的程式碼就是變成下面的結果 😀


從 success 中就可以取得預覽圖的網址、檔名、類型、大小……若有需要還可以取得 base64 的圖片編碼,可以直接使用 POST 送到遠端解碼 😀

前往 Github 看看

jQuery – 在 header 修改,解決跨網域 JSON、JSONP 的方法

通常使用 jQuery 要跨網域存取資料,會出現禁止訊息

通常我們會改用 JSONP,但是 JSONP 只允許使用 GET 方式處理。可以參考官方建議寫法,我這邊舉例 PHP 與 jQuery

PHP

 

jQuery

上面的 callback() 可以自動處理 json 與 jsonp 的回傳。注意上面這兩個例子的名稱要互相匹配:

  • php 的 $jsonp_callback_key
  • jQuery 的 jsonp

所以實際網址會變成類似這樣

 

非 GET 請求怎麼辦?

當 API 設計的要求是 POST、PUT、DELETE …… JSONP 不就沒辦法使用了?後來參考了網友發文發現可以這麼做

PHP

設定 header 為 Access-Control-Allow-Origin:* 或 Access-Control-Allow-Origin:允許的網域  就可以使用 JSON 而不使用 JSONP 啦!你也可以改成 header(‘Access-Control-Allow-Origin:http://localhost’); 那就只限制當發生跨網域行為時,只有從本機發出請求才允許。

jQuery

改用 json 以後發現可以成功唷!而且用 POST  一樣沒問題~~

Ubunto – 安裝 PHP7 + Apache + Mysql/MariaDB + phpMyadmin

切換到 root

第一次需要設定 root 密碼,接著進入 root

另外,若在桌面的話要使用 root 登入可以這麼做

在檔案中加入下面這行

存檔後重新開機,就可以選擇 Login 了。

建議替換倉儲

參考 比較能找到 php 相關較新的版本。

 

建議安裝 aptitude

可以使用

取得較 apt-get 方便的 aptitude,我主要用來查詢 php7 是否存在

因為要查詢套件,無法使用 apt-get 所以要借用 aptitude。如果遇到被鎖定問題,重新新開機 ubuntu 就可以了。或是參考解說

 

安裝 vim

 

MaraiDB 安裝

 

Apache 安裝

到瀏覽器打上 http://localhost 就可以看到 Apache 預設首頁代表安裝成功。接著啟用 mod_reswite 功能,讓伺服器可以讀取 .htaccess 。參考

這時在 phpinfo() 中可以看到 Configuration > apache2handler 的 Loaded Modules 有 mod_rewrite 就代表啟用成功。

找到 DocumentRoot “/var/www/html" 後,修改如

 

另外一種設定

預設網站 http://xxx.com 對應 /var/www/html ,但如果我希望預設 http://xxx.com 網站是讀取 /var/www/html/project 而不是讀取 /var/www/html 那就這麼設定

將 Directory “/var/www/html/" 搬移到外層,代表讓所有 html 底下的都啟用這個 AllowOverride 設定。這可以用在一個網域可能放多個路徑檔案時的指定。例如

  • http://xxx.com 讀取 /var/www/html/project/website
  • http://xxx.com/api 讀取 /var/www/html/project/api

 

若要設定 Alias

如果你希望網址 http://xxx.com/abc 可以連接到  /var/www/html/cdefg,那就添加

參考

 

修改權限

如果使用非 root 無法上傳的話,可修改 /var/www/html 權限為非 root 的 使用者,如 ubuntu。這樣可以當使用帳號 ubuntu 透過 SFTP/FTP 連接的時候進行編輯。

若要透過 FTP 上傳,需要注意權限路徑的問題

 

PHP 安裝

建立第一份 php 測試查看 phpinfo()

網址打 http://localhost/info.php 就可以順利看到 PHP 相關設定資訊。接著安裝相關套件

如果要查詢更多,可以透過 aptitude 查詢可安裝的名稱。若安裝不同的版本號,只需要修改如 php7.x 即可。但確實的名稱建議還是用 search 查詢一下。

接著修改 php.ini

參考這篇修改php.ini

 

啟動SSL支援

 

phpMyadmin 安裝

MaraiDB 預設不讓root登入phpmyadmin,加入這行可解除

修改設定,將 apache 添加 phpmyadmin 設定

參考 在底部加入

修改後重新啟動

網址打上 http://localhost/phpmyadmin/ 就可以看到登入畫面

若要修改進入的網址,例如 http://localhost/PA/ ,那就修改

 

 

Sublimetext – 使用 SFTP 設定 Amazon AWS EC2

在左側專案欄 右鍵 > SFTP/STP > Map to Remote… 會自動產生一份新的 sftp-config.json 修改為以下設定

sftp_flags 可以是 pem 或是轉換為 ppk 都可以。

php – 使用 Google Api 登入並取得個人資料

先介紹編碼,申請 API 方式緊接在後。

編碼

參考。這裡使用 composer 自動引入 google/apiclient 介紹。請按照 0 1 2 3 看流程喔!當然可以拆成多頁 PHP,就不用 if … elseif … 啦。

授權範圍可以這麼寫

或是使用這種寫法

 

 

安裝

參考,使用 Google API Client Libraries 提供的 PHP 版本套件登入,並使用 composer 下載

或是 Github 。此處範例以 composer 為介紹。

取得 ID 與 Secret

前往這裡,在左上角建立專案

輸入專案名稱

一開始平臺中沒有 API,所以我們選擇一個要使用的 API

我們挑選 Google+ API

 

然後啟用這項服務

 

啟用憑證

輸入需要的資料

選擇網路應用程式,並填寫重新導向的 URI。這非常重要,因為要告知 API 當認證完畢以後,要回到哪個網頁。下方介紹使用非框架的寫法,所以只有一張 test.php。

可以看到 ID 與密鑰

忘記的時候點選右邊的筆也能查看

申請文以後,就可以開始寫編碼