在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 程序运行效果图

HTML+JS+CSS实现图片文件上传界面设计的例子的更多相关文章

  1. SpringMvc MultipartFile 图片文件上传

    spring-servlet.xml <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 --> <bean id="multipar ...

  2. js 实现 input file 文件上传

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  3. .Net Core 图片文件上传下载

    当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...

  4. springmvc图片文件上传接口

    springmvc图片文件上传 用MultipartFile文件方式传输 Controller package com.controller; import java.awt.image.Buffer ...

  5. Selenium常用API用法示例集----下拉框、文本域及富文本框、弹窗、JS、frame、文件上传和下载

    元素识别方法.一组元素定位.鼠标操作.多窗口处理.下拉框.文本域及富文本框.弹窗.JS.frame.文件上传和下载 元素识别方法: driver.find_element_by_id() driver ...

  6. Atitit  文件上传  架构设计 实现机制 解决方案  实践java php c#.net js javascript  c++ python

    Atitit  文件上传  架构设计 实现机制 解决方案  实践java php c#.net js javascript  c++ python 1. 上传的几点要求2 1.1. 本地预览2 1.2 ...

  7. 前端使用 js 如何实现大文件上传

    前端使用 js 如何实现大文件上传 大文件上传 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  8. JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  9. 纯原生js移动端图片压缩上传插件

    前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...

  10. 关于layui图片/文件上传

    一:常规使用   普通文件上传 (传入服务器一张图片) 1.前台代码: <!DOCTYPE html><html><head> <meta charset=& ...

随机推荐

  1. 简述ECMAScript6的新特性

    1.增加块级作用域 2.增加let const 3.解构赋值 4.函数参数拓展(函数参数可以使用默认值,不定参数及拓展参数) 5.增加class类支持 6.增加箭头函数 7.增加模块和模块加载(ES6 ...

  2. FastReport报表金额数字转大写问题

    在使用FastReport报表打印的时候涉及到财务结算金额时,会用到大写,系统保存的都为数字,将数字转换为大写没有默认的系统内置函数,经过查阅资料,可通过对FastReport的页面设计代码修改实现: ...

  3. centos7.6镜像

    centos7.6镜像 https://archive.kernel.org/centos-vault/7.6.1810/isos/x86_64/

  4. python音乐分类--knn

    1 #利用knn算法分类音乐,将音乐进行情绪分类 2 #将音乐分为兴奋的(excited), 愤怒的(angry),悲伤的(sorrowful),轻松的(relaxed) 3 4 #可分离因素 5 # ...

  5. LeetCode刷题感想之滑动窗口

    发现滑动窗口也是一种经典解题思路,这一篇简单聊一下滑动窗口. 通常在碰到求XX子数组,子字符串,连续XX等题眼,可以考试用滑动窗口的思路来解决问题. 窗口的类型有几种: 1. 固定长度的窗口. 2. ...

  6. c++官方网站汇集

    c++官方网站汇集 gcc官网: https://gcc.gnu.org/ c++参考手册: https://en.cppreference.com/w/cpp c++教程网站: https://ww ...

  7. 3DMAX2023卸载方法，如何完全彻底卸载删除清理干净3dmax各种残留注册表和文件？【转载】

    3dmax2023卸载重新安装方法,使用清理卸载工具箱完全彻底删除干净3dmax2023各种残留注册表和文件.3dmax2023显示已安装或者报错出现提示安装未完成某些产品无法安装的问题,怎么完全彻底 ...

  8. PR2022(Premiere Pro 2022)Mac/win最新中文版

    Adobe Premiere Pro 2022 Mac/win是用于专业级别的视频编辑软件,一个基于时间轴的视频处理工具,具有许多用于生成高端视频的不同功能.Adobe Premiere Pro最重要 ...

  9. re相关正则表达式（re.sub、re.I 、re.S、re.M）

    re.I 表示忽略大小写 re.S 表示全文匹配 re.M 表示全文拼配行尾段位的字符或者数字,影响^和$ re.sub 表示替换 使用方法: re.sub(pattern, repl, string ...

  10. POJ3723 Conscription 题解

    start: 2021-08-04 16:56:50 题目链接: http://poj.org/problem?id=3723 题目内容: Description Windy has a countr ...