在Java Web应用程序设计中文件上传功能的实现是一项非常重要的工作，本文中的例子程序实现了文件上传功能的界面设计。在Java Web应用程序设计中涉及到上传图片文件功能时，往往都需要对图片文件进行预览，如新闻稿件编辑、证件照片上传等，以便查看上传文件是否正确和效果是否适合，但是Windows系统为了文件安全考虑对文件路径进行了加密，导致在用户端浏览器上不能直接使用文件路径来显示图片文件，需要编写JavaScript脚本程序来实现该功能，在本文的例子程序中还通过添加《文件选择输入框》对象的“change”事件监听程序实现了对图片文件的预览动态更新功能。
1 设计文件上传界面程序（fileUpload.jsp）
fileupload.jsp文件内容如下：
<%@page contentType="text/html;charset=gbk" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP表单设计的例子程序--File</title>
<link rel="stylesheet" type="text/css" href="css/file.css">
<script type="text/javascript" src="js/file.js"></script>
</head>
<body>
<table>
<form id="formFile" name="formFile" action="" method="post">
<tr> <th>图片文件上传界面</th> </tr>
<tr>
<td>
<label for="fileUpload" class="labelButton">选择上传文件</label>
<input id="fileUpload" name="fileUpload" type="file" multiple="true" hidden="true">
</td>
</tr>
<tr> <td class="preview" align="center"><p>文件预览位置</p></td> </tr>
<tr>
<td>
<input class="labelButton" id="submit" name="submit" type="submit" value="提交">
<input class="labelButton" id="reset" name="reset" type="reset" value="重置">
</td>
</tr>
</form>
</table>
<script type="text/javascript">
//调用表单初始化函数，为《文件选择输入框》对象添加“change”事件监听器
initForm();
</script>
</body>
</html>
2 文件上传界面样式文件（file.css）
file.css文件内容如下：
table{ margin: 0 auto; }
table tr{ height: 35px; }
table th{text-align: center; font-family: sans-serif; font-size: 24px; }
table td{ text-align: center; font-family: sans-serif; font-size: 18px; }
.labelButton{ border: 1px solid #0f063e; padding: 0px; border-radius: 5px; height: 30px; width: 80px; }
.labelButton:hover{ color: #eeeeee; }
.labelButton:active{ color: white; }
3 实现图片文件预览功能的脚本程序（file.js）
file.js文件内容如下：
var fileTypes = ["image/jpg", "image/jpeg", "image/png",”image/gif”];
//校验文件是否是合适的图片文件类型
function validFileType(vFile) {
return fileTypes.includes(vFile.type);
}
function imageUpdate() {
//获取表单中的《文件选择框》元素
var fileUpload = document.getElementById("fileUpload");
//通过类选择器（class=”preview”）获取文件预览位置的表单元素
var imagePreview = document.querySelector(".preview");
//在图片文件预览之前，把文件预览位置处以前添加的HTML元素清除了
while (imagePreview.firstChild) {
imagePreview.removeChild(imagePreview.firstChild);
}
//获取文件选择输入框中选择的当前文件信息
var curFile= fileUpload.files[0];
//创建临时HTML区块元素<p>
var tempElement = document.createElement("p")
if (curFile) {
if (validFileType(curFile)) {
//将选择文件的名称、大小等信息赋值到临时区块元素的textContent属性
tempElement.textContent="文件名称："+curFile.name +" 文件大小："+curFile.size+"字节";
//创建HTML图片元素<img>
var tempImage=document.createElement("img");
//设置图片高度400像素，数字后不能添加px单位
tempImage.height=400;
//通过URL对文件路径编码并赋值给img元素的src属性
tempImage.src=URL.createObjectURL(curFile);
//把创建的临时img元素添加到图片预览位置
imagePreview.appendChild(tempImage);
//把创建的临时p元素添加到图片预览位置
imagePreview.appendChild(tempElement);
} else {
tempElement.textContent = "选择的文件类型不正确！";
imagePreview.appendChild(tempElement);
}
} else {
tempElement.textContent = "没有选择上传文件！";
imagePreview.appendChild(tempElement);
}
}
function initForm() {
//获取表单中《文件选择框》元素
var fileUpload=document.getElementById("fileUpload");
//为表单中《文件选择框》元素添加“change”事件监听器
fileUpload.addEventListener("change",imageUpdate);
}
4 程序运行效果图
标签：界面设计,fileUpload,预览,文件,JS,HTML,imagePreview,上传,图片 From： https://www.cnblogs.com/Freeland98/p/17246233.html