在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. Mysql学习：4、DML命令（增删改查）及密码修改

    1.查询表中所有数据: select * from students; 2.插入数据: insert into students (id,name,email,address) values(1,'张 ...

  2. 如何保证RabbitMQ不会被重复消费？

    为什么会有重复消费? 做一个标志! 在将生产者写消息的时候,对数据做一个唯一标识.消费者在消费消息时,根据这个唯一标识做判断,如果这个唯一标识被消费过了,那么就 不消费了,如果判断结果是没有被消费过, ...

  3. 音速启动 Vstart 5.7 win10手动移除后台设置主页

    Vstart 用了快12年了,用Wireshark跟踪确实会访问广告页面,也会去上传数据.还会悄悄设置主页 ,所以在Win10上老是被干掉 也想着换 CLaunch 确实不喜欢. Rolan 买了一年 ...

  4. 【pyqtgraph】pyqtgraph可移动竖线LineSegmentROI的拖拽事件相关

    情景 Python+PyQt+pyqtgraph读取数据绘图,并在图像上添加了LineSegmentROI带handle的竖线(hanlde是为了RectROI的拖动),现要实现竖线可以直接拖动,并在 ...

  5. python 实现视频流下载保存MP4

    # -*- coding:utf-8 -*-import sysimport osfrom glob import globimport requests reload(sys)sys.setdefa ...

  6. 照亮体育馆 Barisal Stadium

    UVA10641 题目为逆时针顺序编号,这里直接将数组开两倍来处理环.(然而不知为啥开到1000也能过) 定义: Corners[i]Corners[i]Corners[i]为体育馆点的坐标. Lig ...

  7. JavaWeb学习--EL表达式

    一.EL表达式: 1.命令表达式: ${作用域对象别名.共享数据} 2.命令作用: 1)EL表达式是EL工具包提供一种特殊命令格式[表达式命令格式] 2)EL表达式在JSP文件上使用 3)负责在JSP ...

  8. C# Http 服务器get pos 请求 获取头信息 iOS 客户端联调

    using System; using System.Collections.Generic; using System.IO; using System.Net; using System.Text ...

  9. linux-taglist

    vim 变量.函数索引 1. sudo dnf install vim-taglist 2. 下载taglist, https://www.vim.org/scripts/script.php?scr ...

  10. 如何设置表格的高度 element 的table 组件

    <el-table :row-style="{ height: '30px' }" :cell-style="{ padding: 0 }" :data= ...