本文将详细介绍如何实现一个File文件控件，使得用户在选择图片、Flash或视频文件后能够立即预览，而无需页面刷新。这个功能在许多网站的上传功能中非常实用，例如在线编辑器、媒体分享平台等。我们将探讨JavaScript代码和HTML结构，以实现这一功能。
我们需要一个HTML页面，包含一个File类型的输入控件，用户可以通过它来选择文件。这个控件通常看起来像一个按钮，用户点击后可以浏览他们的电脑，选择一个文件。HTML代码如下：
```html
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" ID="Table1">
<tr>
<td width="255" height="100%" valign="middle">
<INPUT id="FileUp" style="WIDTH: 253px; HEIGHT: 22px" type="file" size="23" name="File1" runat="server" onchange="checkData()">
<br>
注：这里可以是图片（jpg或gif格式），flash动画（swf）及视频文件（wmv,mpeg,asf,avi）。大小限定在1M以内。
</td>
<td>
<div id="previewImage">当前页预览</div>
</td>
</tr>
</table>
```
在这个例子中，`onchange`属性指定了一个JavaScript函数`checkData()`，当用户选择了一个文件后，这个函数会被调用。`checkData()`函数的作用是检查选定文件的类型，并根据文件类型显示不同的预览内容。
下面是`checkData()`函数的JavaScript代码：
```javascript
function checkData() {
var fileName = document.getElementById("FileUp").value;
if (fileName == "") return;
// 检查文件类型
var exName = fileName.substr(fileName.lastIndexOf(".") + 1).toUpperCase();
if (exName == "JPG" || exName == "BMP" || exName == "GIF") {
// 显示图片预览
document.getElementById("previewImage").innerHTML = '<img src=\'' + fileName + '\' width=100 height=100>';
} else if (exName == "SWF") {
// 显示Flash预览
document.getElementById("previewImage").innerHTML = '<embed src=\'' + fileName + '\' width=\'100\' height=\'100\' quality=\'high\' bgcolor=\'#f5f5f5\'></embed>';
} else if (exName == "WMV" || exName == "MPEG" || exName == "ASF" || exName == "AVI") {
// 显示视频预览
var strcode = '<embed src=\'' + fileName + '\' border=\'0\' width=\'100\' height=\'100\' quality=\'high\' ';
strcode += 'autoStart=\'1\' playCount=\'0\' enableContextMenu=\'0\' type=\'application/x-mplayer2\'></embed>';
document.getElementById("previewImage").innerHTML = strcode;
} else {
alert("请选择正确的图片文件");
document.getElementById("FileUp").value = "";
}
}
```
这个函数首先获取用户选择的文件名，然后检查其扩展名。如果文件是图片，它会创建一个`<img>`标签来显示图片；如果是Flash，它会创建一个`<embed>`标签来播放Flash；如果是视频，也会使用`<embed>`标签来显示视频预览。如果文件类型不正确，函数会弹出警告并清空文件输入控件。
为了提供更好的用户体验，我们可以创建一个弹出窗口来预览选定的文件。这可以通过JavaScript的`window.open()`函数实现。例如，我们可以创建一个名为`addPreview.aspx`的新页面来专门显示预览内容。
这个File文件控件通过JavaScript和HTML的组合，实现了文件选择后的即时预览功能，无需页面刷新。这种技术在网页应用中很常见，提高了用户交互性和便捷性。不过，需要注意的是，由于浏览器的安全限制，这种方法可能在某些情况下无法工作，例如跨域访问或文件路径的限制。在实际开发中，应确保遵循最新的浏览器安全指南和最佳实践。
