“朱哥什么時候咱做一個通過canvas圖片上傳的功能啊！”俊性，小白一大早向老朱問道。
老朱：“這個不能著急描扯，圖片上傳涉及的功能比較多磅废，你可以先試著做一個通過input控件上傳的功能，做好以后我們在input上傳的基礎(chǔ)上配合canvas就可以實現(xiàn)圖片壓縮及剪切后上傳了荆烈≌悖”
“input不是文本框么竟趾？它能做上傳的功能？”
老朱：“input的type如果設(shè)置成file它就能配合php等語言做文件上傳宫峦，具體php是怎么做上傳的你不用關(guān)心岔帽，只需要給php發(fā)送參數(shù)接受參數(shù)就可以了。你知道的导绷，input就是個表單犀勒，type設(shè)置成file后它多了一個選擇文件的功能，選擇好文件以后input就會記錄下文件的本地路徑妥曲。注意它并不是把整個文件拿過來贾费，而是記錄的路徑￠苊耍”
小白：“哦褂萧！我大概明白了，其實也就是用選擇文件的方式來代替我們手動輸入圖片的本地路徑這個操作葵萎，那怎么才能把圖片上傳到服務(wù)器上呢导犹？”
老朱：“javascript和html都是前端代碼，使用他們肯定無法直接傳到服務(wù)器上羡忘，所以我們還需要一個圖片上傳的接口頁面谎痢，這個頁面可以用php做也可以用c#或者jsp來做【淼瘢”
老朱接著說道：“圖片上傳的接口頁面一般有兩種類型节猿，一種是：通過js讀取圖片流POST發(fā)送到接口頁面，然后將圖片信息寫入到服務(wù)器上漫雕，寫入成功以后返回一個成功信息和圖片在服務(wù)器上的地址信息滨嘱。另一種是：通過Form把圖片信息發(fā)送給接口頁面，然后將圖片信息寫入到服務(wù)器上蝎亚，寫入成功以后返回一個成功信息和圖片在服務(wù)器上的地址信息九孩。”
小白：“聽上去很復(fù)雜胺⒖颉躺彬！”
老朱：“是啊，圖片上傳也算是web前端的一個重要功能了梅惯，這個功能用的地方特別多宪拥，所以我們還是得把它屢明白。理解功能以后我們下一步先通過js拿到圖片信息做一次上傳試試铣减。我先給你在服務(wù)器上部署一個圖片上傳的接口頁面她君，一會再聊！”
想學(xué)H5的朋友可以關(guān)注老爐葫哗，您的關(guān)注是我持續(xù)更新《小白HTML5成長之路》的動力缔刹！
