![](http://www2.flash8.net/Uploadteach/2005/06/27/2005627214416355.gif)
![](http://www2.flash8.net/Uploadteach/2005/06/27/2005627214420520.gif)
在上传控件浏览到文件后通过 onpropertychange 事件改变隐藏图片的路径,如果文件是图片格式,正常显示,否则提示格式不正确。
![](http://www2.flash8.net/Uploadteach/2005/06/27/2005627214425387.gif)
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 所示。
![](http://www2.flash8.net/Uploadteach/2005/06/27/2005627214444914.jpg)
图 3.34 选择正确的图片文件后显示图片预览
![](http://www2.flash8.net/Uploadteach/2005/06/27/2005627214453498.jpg)
图 3.35 选择Flash 文件后弹出的警告框
特别说明
本例通过用 onpropertychange 捕获对象的属性变化事件,onload 捕获图片加载 完成后的事件,onerror 捕获图片加载时的出错事件,并通过script标签的for和event属性绑定到对象,而实现的上传图片预览效果。
1. onpropertychange 当在对象上发生对象上发生属性更改时触发
2. onload 在浏览器完成对象的装载后立即触发。
3. onerror 当对象装载过程中发生错误时触发。
4. event 设置或获取脚本编写用于的事件。
5. for 设置绑定到事件脚本的对象,在获取脚本所绑定到的对象是用 htmlFor 。
责任编辑:kissall 时间:2005年8月29日