Js InputFile控件上传图片之前进行图片预览,使用For和event实现

Js InputFile控件上传图片之前进行图片预览,使用For和event实现

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

解决思路：

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

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

<input type="file" id="upload">
<img id="pic" style="display:none">

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

<script for="upload" event="onpropertychange">   
pic.src=this.value
</script>

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

<script for="pic" event="onload">
this.style.display=""    //以行内元素方式显示隐藏的图片
</script>

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

<script for="pic" event="onerror">
//当 id 为 pic 的对象在装载过程中发生错误时触发此段代码
this.style.display="none"   //隐藏图片
alert("所选文件并非图片，请重新选择")
</script>

5.完整代码。

<script for="upload" event="onpropertychange">   
//当 id 为 upload 的对象上的属性发生变化时调用此段代码
//设置隐藏图片的地址为上传控件框的值
pic.src=this.value
</script>

<script for="pic" event="onload">
//当 id 为 pic 的对象在装载完成时触发此段代码
this.style.display=""    //以行内元素方式显示隐藏的图片
</script>

<script for="pic" event="onerror">
//当 id 为 pic 的对象在装载过程中发生错误时触发此段代码
this.style.display="none"   //隐藏图片
alert("所选文件并非图片，请重新选择")
</script>

<input type="file" id="upload">
<img id="pic" style="display:none">

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

特别说明：

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

转自：http://blog.chinaunix.net/u1/41559/showart_1901488.html