在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. javascript向tabale中动态添加数据

    <table width="600" border="1" cellspacing="0"> <thead> < ...

  2. Activiti工作流引擎系列-第二篇

    官网案例下载安装实例 { "info": { "_postman_id": "64f2d7ca-8287-4f8d-94ba-1138861877dd ...

  3. oracle修改表中的列

    declare v_Count1 int := 0; v_Count2 int := 0; v_Count3 int := 0; v_Count4 int := 0; v_Count5 int := ...

  4. infoq上看视频1（持续更新）

    打破工程师思维 http://www.infoq.com/cn/presentations/break-engineer-thinking 百姓网人: 从技术走向产品的那点儿事 http://www. ...

  5. 自己制作Switch大气层SDFile

    ️SWITCH SDFILE 每次吃灰之后,就想更新下系统,每次都得研究一遍... 决定好好研究下,发现不是很繁琐. SDFile有哪些文件组成! Atmosphere 任天堂Switch定制固件 H ...

  6. 数组扩展（Java）

    Arrays类 基本介绍 数组的工具类java.util.Arrays 由于数组本身中没有什么方法可供我们调用,但API中提供了一个工具类Arrays供我们使用,从而可以对数据对象进行一些基本操作 查 ...

  7. js 数组对象中每一项对象属性比较大小与计算数组对象属性和

    // 数组对象排序方法   export function compare(property) {       return function (a, b) {         const value ...

  8. 11.30linux学习第十一天

    今天老刘上课,第7章收尾,第8章开了个头. 7.1.3  磁盘阵列+备份盘 RAID 10磁盘阵列中最多允许50%的硬盘设备发生故障,但是存在这样一种极端情况,即同一RAID 1磁盘阵列中的硬盘设备若 ...

  9. 网络游戏同步法则 -- skywind

    转载出处:http://www.skywind.me/blog/archives/112 网路的硬件也有限,而人的创造也无限,在公网平均130ms的Latency下,是不存在"完全的&quo ...

  10. 【jupyter notebook】配置基于ecs云平台的jupyter notebook远程使用

    学校提供了ecs云服务器进行高性能运算 分配到了云主机后想在上面搭好jupyter notebook服务器方便远程使用,在此记录整个流程和遇到的问题 本文档适用于常规的jupyter notebook ...