日期:2014-05-18  浏览次数:20673 次

哪位有Webwork关于文件上传的例子。
要求点击图片之后,文件能在窗口预览。就这么简单,在线等

------解决方案--------------------
用JS就可以实现
<script language="javascript">
 function preview(obj,div) {
div.innerhtml = "<img src='"+obj.value+"'">
 }
</script>

<body>
 <form ...>
<input type="file" onchange="javascript:preview(this,'preimg')">
<div id="preimg">
</div>
 </form>
</body>
------解决方案--------------------
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 


------解决方案--------------------
楼上强啊