input file控件上传图片之前进行图片预览

在上传图片前能否实现图片预览

解决思路：

在上传控件浏览到文件后通过 onpropertychange 事件改变隐藏图片的路径，如果文件是图片格式，正常显示，否则提示格式不正确。
具体步骤：

1.先插入一个上传表单控件和一隐藏的空白图片。

2.在上传控件的属性改变(本例中为选择文件后)，设置隐藏图片的地址为所选择的文件地址。

3.在隐藏图片加载完后显示。

4.如果所选择文件不是图片格式或者路径不正确，触发onerror事件，隐藏图片并弹出警告框。

5.完整代码。

技巧：显示对象除了设置display为空，还可以设为 inline 和 block

特别说明：

本例通过用 onpropertychange 捕获对象的属性变化事件，onload 捕获图片加载 完成后的事件，onerror 捕获图片加载时的出错事件，并通过script标签的for和event属性绑定到对象，而实现的上传图片预览效果。
1. onpropertychange 当在对象上发生对象上发生属性更改时触发。
2. onload 在浏览器完成对象的装载后立即触发。
3. onerror 当对象装载过程中发生错误时触发。
4. event 设置或获取脚本编写用于的事件。
5. for 设置绑定到事件脚本的对象，再获取脚本所绑定到的对象是用 htmlFor 。