在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. 小凡的Python之路——安装

    小凡的Python之路--安装 第二天是周六,俩人约定九点半在图书馆二楼最西边的阅览室里共同学习Python.吃过早饭,小凡背着电脑向图书馆走去. 小文一直在学习Python?这是小凡最大的疑问.至少 ...

  2. BASE64编码作业

    BASE64编码作业 什么是BASE64编码 ase64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法.可查看RFC2045-RF ...

  3. Java中的super和this关键字——

    super与this关键字 先总结再解释: super关键字:我们可以通过super关键字来实现对父类成员的访问,用来引用当前对象的父类. this关键字:指向自己的引用. super注意点: 1.s ...

  4. el-table 固定列错位问题

    1. 问题描述:el-table使用固定列时,使用keep-alive后页面切换导致该列错位. 2. 解决方法:使用el-table的doLayout方法对表格进行重新布局 activated() { ...

  5. MyBatis Generator使用方法

    第一步:在resources文件夹下创建一个目录mybatis-generator,在目录mybatis-generator下创建文件generatorConfig.xml(此处的目录名可任意取) 第 ...

  6. Java自增自减运算符

    3.1自增自减运算符 注意事项: ++和--既可以放在变量的后边,也可以放在变量的前边 单独实用的时候,++和--无论是放在变量的前边还是后边,结果是一样的 参与操作的时候,如果放在变量的后边,先拿变 ...

  7. Executor框架详解

    Executor框架详解 java的线程既是工作单元,也是执行机制.从jdk5开始,把工作单元与执行机制分离开来.工作单元包括Runnable和Callable,而执行机制由Executor框架提供. ...

  8. java中锁的应用(ReentrantLock)

    package com.xielu.test; public class explicit { private static Lock lock = new ReentrantLock(); priv ...

  9. 基于mysql纯java的智能题库（后期填写注释）

    1 package controller; 2 3 import admin.entity.Admin; 4 import admin.service.AdminService; 5 import a ...

  10. 在gibhub上传本地项目代码(新手入门）

    一.首先注册github账号 地址:https://github.com/ 二.其次下载安装git工具 地址:https://gitforwindows.org/ 直接进入安装,这里就不多做介绍 三. ...