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

　　在上传图片前能否实现图片预览
解决思路：
在上传控件浏览到文件后通过 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

特别提示
代码运行后，单击上传控件的”浏览”按钮选择文件后，如果所选择文件为图片格式，则在右(下)方显示所选图片，否则弹出警告框。效果分别如图 3.34 和图3.35 所示。

图 3.34 选择正确的图片文件后显示图片预览

图 3.35 选择Flash 文件后弹出的警告框

特别说明

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

   责任编辑:kissall    时间:2005年8月29日