tedshd's DevNote

Develop & Design Note by Ted

file upload 123

File Upload

Server side setting

php.ini

in Mac

/etc/php.ini
file_uploads = On

upload_max_filesize = 10M

post_max_size = 10M


file_uploads
# 預設為on,允許用HTTP協定上傳
upload_tmp_dir
# 上傳檔案暫存目錄,wamp5中,c:/wamp/tmp
upload_max_filesize
# 上傳檔案最大值
post_max_size
# 利用 post 傳送數據所用最大值(利用 AJAX 或 post 上傳會有影響)
max_execution_time
# PHP執行時間最大值,預設為30秒

style

由於預設的 <input type="file"> 樣式不好改,且每一個 broswer 預設的樣式都不一樣,所以都會希望用統一化的客制化樣式,但基本上不太可能把它的樣式改成所想要的客制化的樣式,除非直接用像 Bootstrap 之類的框架

solution 1(hack)

<input type="file"> 的 style 設成 opacity: 0; 蓋在客制化的 button 上,也必須要設成跟客制化寬高一樣,以免覆蓋面積不一樣

  • CSS

    .btn, .file-select {
        width: 80px;
        height: 30px;
    }
    .btn {
        border: solid 2px #0044ff;
        background: #0088ff;
        color: #ff8800;
        border-radius: 5px;
        text-align: center;
    }
    .file-select {
        position: relative;
        left: -84px;
        opacity: 0;
    }
    
  • HTML

    <div>
        <button class="btn">Button</button>
        <input type="file" class="file-select">
    </div>
    

solution 2(better)

利用 <label></label> 的 for 特性來處理
Bootstrap 就是利用這個方法
demo

  • HTML

    <form action="upload_img.php" method='post' enctype='multipart/form-data'>
    <label for="file-style">
        <input type="button" class="btn" value="Select file">
        <!--if IE, only IE9 up-->
    </label>
    <input type="file" name="file" id="file-style">
    <label for="file-style_2" class="btn btn-primary">
        <span>Select file</span>
    </label>
    <input type="file" name="file_2" id="file-style_2">
    <input type="submit" class="btn btn-primary">
    </form>
    
  • CSS

    /*--把 input 藏起來--*/
    #file-style {
        opacity: 0;
        width: 0;
        height: 0;
    }
    

點擊 <label></label> for 會觸發 mapping 到 id 的 <input> 元素
利用這原理就可以在點擊 <label></label> 時, 點擊到 <input type="file"> 進而開啓檔案選擇
直接改 <label></label> 樣式是較好的做法

Issue

javascript click input file in IE

由於安全性問題所以在 IE 中利用 javascript 去 click file 做選擇檔案之後,在做 submit 時會發現 IE 會把用 javascript 選的檔案去除,不讓該檔案上傳
example

upload long name file in IE8/9

在 IE 8/9 中不會讓使用者上傳過長的檔名
直接在 <input type="file"> 那就不會有檔案了
IE issue

if upload image, avoid smaill image or fake picture

hamdle upload file name like ..jpg or ...docx, ...

Linux/unix command

command

User

su / sudo
# 最高權限使用者


su -u <user name> bash
# 切換使用者


exit
# 跳出最高權限使用者


shutdown
# 關機

shutdown -h now 立即關機
shutdown -h +m m分鐘後關機
shutdown -h hh:mm 幾點幾分關機

reboot
# 重開機


login
# 登入使用者


logout / exit
# 登出


passwd
# 修改密碼

useradd / adduser
# 新增帳號


passwd
# 修改密碼


sudo -u <user name> <shell>
# 切換使用者


date
# 顯示時間

date 月日時分(root修改)

history
# 顯示輸入過的指令


ps
# 顯示目前執行的工作


chmod <777>
# 修改權限

# rwx

# 2*2 2 1


chown <user>:<user> <file>
# 修改該 file owner


uname -a
# 確認 system OS


uanme -r
# linux kernel


df
# 確認硬碟空間


File Management

ls
# 列出檔案

ls -a 列出以.開頭的檔案
ls -l 列出檔案詳細
ls -- directory 查看該目錄內容

cd
# 切換目錄

cd .. 回上一層
cd / 切換到系統根目錄
cd 目錄
cd 路徑

pwd
# 顯示目前所在目錄


clear
# 清空畫面


info / man
# 查詢指令


tab
# 同DOS的tab功用,切換下一個選擇的項目


mkdir
# 建立目錄


rmdir
# 刪除目錄


touch
# 建立檔案


cp
# 複製檔案

cp -v 顯示複製過程
cp -r <folder> <directory> 把資料夾複製到某目錄
cp <file> <path>

rm
# 刪除檔案或目錄

rm -f 強制刪除檔案
rm -rf 強制刪除目錄

mv
# 搬移或更名檔案或目錄

mv <file> <path>
mv <舊檔名> <新檔名>

cat
# 瀏覽檔案內容


less
# 分頁瀏覽檔案內容

q 離開

find / locate
# 尋找檔案

# find -name "php.ini"


more
# 顯示畫面暫停


|
# 管線

將指令結果輸出給另一個指令

>
# 重導

將指令結果輸出到檔案中檔案原有內容被刪除

>>
# 重導

將指令結果輸出到檔案中檔案原有內容不被刪除

grep -r 'XXX' *
# 找內含XXX的檔案


scp
# ssh copy

scp <username@tohostname>:<remote file> <local path>
scp <local file> <username@tohostname>:<remote path>
scp -r <username@tohostname>:<remote directory> <local path>
scp -r <local directory> <username@tohostname>:<remote path>
scp -i <key> <local directory> <username@tohostname>:<remote path>

tar -zcvf .tar.gz

壓縮資料夾

tar -zxvf .tar.gz

解壓縮資料夾

sudo lsof -i -P -n | grep LISTEN

確認開啟的port

apt

apt --installed list
# 列出已安裝套件


sudo aptitude update
# 修復損毀的相依性


sudo aptitude safe-upgrade
# 較為安全的升級方式

sudo aptitude full-upgrade
# 針對整個系統做升級, 可能會更動系統核心的版號

sudo aptitude dist-upgrade
# 同於 full-upgrade

Mail server

host -t mx <mail domain>
# 查詢是否已紀錄此 mail domain

jQuery-design pattern

modulize

  • modulize selector
    var module = $('body');
    module.on('click', 'a', function() {
        // dosomething...
    
    });
    
  • initialize
    if ($('body').length) {
        // dosomething
    
    }
    

selector

id is better than tag and class

HTML

<div>
    <ul>
        <li id="id" class="class">text</li>
    </ul>
</div>

JavaScript

$('#id').html();
$('body').find('#id');

jsperf

bind event

use on
bind on parent selector

$('ul').on('click', 'li', function () {
    // dosomething

});

js Bin

jQuery selector

* 所有元素
E 所有E元素,
E:nth-child(n) 傳回在所屬父元素下,排行第 n 的元素 E。(注意: 從 1 開始算,而非從 0)
E:first-child 傳回在所屬父元素下,排行第一的元素(老大)
E:last-child 傳回在所屬父元素下,排行最後的元素(老么)
E:only-child 傳回在所屬父元素下,是唯一子元素(獨子)
E:empty 沒有任何子元素者(有文字也不算,例如 <span>TEXT</span> 就不合格)
E:enabled 未被停用的 UI 元素 E
E:disabled 被停用的 UI 元素 E
E:checked 被勾選的 UI 元素 E(適用於 Radio, Checkbox)
E:selected 被選取的 UI 元素 E(適用於 Select 下的 Option 元素)
E.myClassName CSS 類別設為 myClassName 的元素 E
E#myId id="myId" 的元素 E
E:not(s) 不符合 s 條件的元素 E,例如: $("span:not(:empty)") 即為找出有包含子元素的 span
E F 由包含在 E 底下的 F 元素,不必直接為父子關係,例如: F 可以是 E 的子元素的子元素。
E > F 找出父元素為 E 的 F 元素
E + F 找出緊接在 E 元素後方的 F 元素
E ~ F 找出緊接在 E 元素前方的 F 元素
E,F,G 利用逗號可以呈現 " 或 " 的聯集效果,指 E 元素或 F 元素或 G 元素
E[foo] 具有 foo 屬性 (Attribute) 的E元素(1.2.6 以前的版本亦可用 E[@foo] 表示,1.3 版本起取消 @ 符號的使用)
E[foo=bar] 有 foo 屬性,且 foo 屬性值為 bar 的 E 元素
E[foo!=bar] 有 foo 屬性,且 foo 屬性值不等於 bar 的 E 元素
E[foo^=bar] 有 foo 屬性,且 foo 屬性值以 bar 開頭的 E 元素
E[foo$=bar] 有 foo 屬性,且 foo 屬性值以 bar 結尾的 E 元素
E[foo*=bar] 有 foo 屬性,且 foo 屬性值中包含 bar 字眼的 E 元素
E[foo=bar][baz=bop] 同時具備 foo 及 baz 屬性,且其值分別為 bar 及 bop 的 E 元素
:even 由選取結果中只挑出第雙數個
:odd 由選取結果中只挑出第單數個
:eq(N) and :nth(N) 由選取結果中取出第 N 個,由 0 起算
:gt(N) 由選取結果中只保留第 N 個以後者(不含 N)
:lt(N) 由選取結果中只保留第 N 個以前者(不含 N)
:first 選取結果中的第一個,等同於 :eq(0)
:last 選取結果中的最後一個
:parent 選取包含子元素者(文字內容也算,例如:<span>Text</span>)
:contains('test') 選取元素內的文字包含特定字串者
:visible 選取所有可見的元素(包含 CSS display=block 或 inline, visibility=visible 但不含 <input type="hidden">)
:hidden 選取所有不可見的元素(包含 CSS display=none, visibility=hidden以及<input type="hidden">) 
:input 選取所有表單輸入元素(包含 input, select, textarea, button).
:text 選取所有 <input type="text">
:password 選取所有 <input type="password ">
:radio 選取所有 <input type="radio ">
:checkbox 選取所有 <input type="checkbox">
:submit 選取所有 <input type="submit">
:image 選取所有 <input type="image">
:reset 選取所有 <input type="reset">
:button 選取所有 <input type="button">
:file 選取所有 <input type="file">

size() 或 length 傳回群組的物件個數
eq(N) 取出群組中第 N 個 jQuery 物件
get() 傳回元素的陣列
get(N) 取出第 N 個元素
index(element 或 jQuery 物件) 用來找某元素在選取結果中的排名順序,例如網頁上有五個 <div>,<div id="dvX"> 為第三個,則$("div").index(document.getElementById("dvX")) 可以得到 2 (由 0 起算,故第三個為 2),$("div").index($("#dvX")) 也可得到同樣結果。元素不在群組時傳回 -1。