“朱哥什么时候咱做一个通过canvas图片上传的功能啊！”，小白一大早向老朱问道。

老朱：“这个不能着急，图片上传涉及的功能比较多，你可以先试着做一个通过input控件上传的功能，做好以后我们在input上传的基础上配合canvas就可以实现图片压缩及剪切后上传了。”

“input不是文本框么？它能做上传的功能？”

老朱：“input的type如果设置成file它就能配合php等语言做文件上传，具体php是怎么做上传的你不用关心，只需要给php发送参数接受参数就可以了。你知道的，input就是个表单，type设置成file后它多了一个选择文件的功能，选择好文件以后input就会记录下文件的本地路径。注意它并不是把整个文件拿过来，而是记录的路径。”

小白：“哦！我大概明白了，其实也就是用选择文件的方式来代替我们手动输入图片的本地路径这个操作，那怎么才能把图片上传到服务器上呢？”

老朱：“javascript和html都是前端代码，使用他们肯定无法直接传到服务器上，所以我们还需要一个图片上传的接口页面，这个页面可以用php做也可以用c#或者jsp来做。”

老朱接着说道：“图片上传的接口页面一般有两种类型，一种是：通过js读取图片流POST发送到接口页面，然后将图片信息写入到服务器上，写入成功以后返回一个成功信息和图片在服务器上的地址信息。另一种是：通过Form把图片信息发送给接口页面，然后将图片信息写入到服务器上，写入成功以后返回一个成功信息和图片在服务器上的地址信息。”

小白：“听上去很复杂啊！”

老朱：“是啊，图片上传也算是web前端的一个重要功能了，这个功能用的地方特别多，所以我们还是得把它屡明白。理解功能以后我们下一步先通过js拿到图片信息做一次上传试试。我先给你在服务器上部署一个图片上传的接口页面，一会再聊！”

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！