在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. elementUI 中日历自定义内容 配置具体内容

    效果图如下: 代码如下: <template> <div class="con-main"> <div class="con-list&qu ...

  2. vue后台管理系统——权限管理模块

    电商后台管理系统的功能--权限管理模块 1. 权限管理业务分析 通过权限管理模块控制不同的用户可以进行哪些操作,具体可以通过角色的方式进行控制,即每个用户分配一个特定的角色,角色包括不同的功能权限. ...

  3. Day12-面向对象初识

    面向对象编程 Java的核心思想就是OOP 一.面向过程&面向对象 面向过程思想: 步骤清晰简单,第一步做什么,第二步做什么...... 面对过程适合处理一些较为简单的问题 面向对象思想: 物 ...

  4. 分布式-Etcd介绍

    Etcd客户端基本操作 提供了如下操作接口: put - 添加一个新的 key-value 到存储中 get - 获取一个 key 的 value delete - 删除节点 range - 获取一个 ...

  5. oracle-11.2.0.4静默安装----RedHat7.5

    1.配置/etc/hosts文件和关闭seliux和firewall防火墙 编辑/etc/hosts文件 [root@henry ~]# vim /etc/hosts [root@henry ~]# ...

  6. ubuntu20安装open4.4带扩展库

    0查看当前版本安装 opencv_version 已经装了3.49 再装个4.4共存 1安装依赖库 sudo add-apt-repository "deb http://security. ...

  7. 初次接触软构和git（使用eclipse）

    目录: 一.git和github 二.软件构造lab1常见问题(eclipse) 一.git和github 1. git的安装 百度git然后去官网安装即可,不会的可以去百度查一下. 2. git和g ...

  8. 导入ssm项目时，项目基本的配置文件

    一.ssm框架基本的配置文件 上面的这些配置文件对于比较简单的ssm项目其实大同小异,逻辑上是差不多的. 在config目录下 在lib下就是各种jar包 二.导入ssm项目后,本地环境配置和项目本身 ...

  9. CF823div2B

    cf823div2B 题目链接 题目大意 多组测试数据,有\(n\)个点在数轴上,他们想要集会,每个点到目标点\(y\)的时间为$$t_i+|x_i-y|$$ 试求所有点到\(y\)中最长时间的最小值 ...

  10. 量化交易 - matplotlib画candle图

    需要mplfinance包 pip install mplfinance --upgrade   from matplotlib import style import pandas as pd im ...