文件上传之二利用frame实现无页面刷新的文件上传

在上一篇文章中是将文件随表单中其他数据一起提交的，这样在提交一个表单时需要较长的时间，用户体验不是很好。一般网站选择将文件与表单的其他数据分开而单独上传。本文介绍如何利用iframe标签将上传文件模块嵌套在表单中，实现无页面刷新的文件上传。

表单页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
<div>
<h3>Frame嵌套的方式上传文件</h3>
</div>
<div>
<form action="" method="post">
<div>
<span>文件名：</span>
<input type="text" name="filename" />
</div>
<div>
<iframe src="FrameFileUpload.jsp"></iframe>
</div>
<div>
<input type="submit" value="提交" />
</div>
</form>
</div>
</div>
</body>
</html>

文件上传页面（通过iframe嵌套在表单页面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>File Upload</title>
</head>
<body>
<div>
<form action="frameFileLoadAction" enctype="multipart/form-data"
method="post">
<div>
<input type="file" name="file" id="file_upload" />
</div>
<div>
<input type="submit" value="上传" />
</div>
</form>
</div>
<div>
<span>上传结果：</span>
<span>
<%
String isSuccess = request.getParameter("isSuccess");
if ("1".equals(isSuccess)) {
out.print("上传成功");
} else if ("0".equals(isSuccess)) {
out.print("上传失败");
} else {
out.print("还没有上传文件");
}
%>
</span>
</div>
</body>
</html>

struts2配置文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<constant name="struts.devMode" value="true" />
<constant name="struts.i18n.encoding" value="UTF-8" />
<constant name="struts.ui.theme" value="simple" />
<constant name="struts.multipart.maxSize" value="100" />
<constant name="struts.multipart.saveDir " value="c:/tmp" />
<package name="fileUpload" extends="struts-default" namespace="/">
<action name="frameFileLoadAction" class="com.study.action.FileUploadAction"
method="execute">
<param name="filePath">/filetemp</param>
<result name="success">/FrameFileUpload.jsp?isSuccess=1</result>
<result name="input">/FrameFileUpload.jsp?isSuccess=0</result>
</action>
</package>
</struts>

Struts2的Action

package com.study.action;
import java.io.File;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.study.util.FileCopyUtil;
public class FileUploadAction extends ActionSupport {
protected File file;
protected String fileFileName;
protected String fileContentType;
protected String filePath;
protected void restoreFile() throws Exception {
if (this.file != null) {
File temp = new File(ServletActionContext.getServletContext()
.getRealPath(this.filePath) + "/" + this.fileFileName);
FileCopyUtil.copy(this.file, temp);
}
}
@Override
public String execute() throws Exception {
this.restoreFile();
return "success";
}
public File getFile() {
return file;
}
public void setFile(File file) {
this.file = file;
}
public String getFileFileName() {
return fileFileName;
}
public void setFileFileName(String fileFileName) {
this.fileFileName = fileFileName;
}
public String getFileContentType() {
return fileContentType;
}
public void setFileContentType(String fileContentType) {
this.fileContentType = fileContentType;
}
public String getFilePath() {
return filePath;
}
public void setFilePath(String filePath) {
this.filePath = filePath;
}
}

总结：通过iframe嵌套文件上传页面，从而将文件上传与其他数据分开提交。其实刷新的是iframe。但这样整个页面不会刷新，给用户的感觉更好。

PS：上传文件后可以将文件的存储位置返回并放在表单中与其他数据一块上传。

转载于:https://blog.51cto.com/zhbhun/1165506

文件上传之二利用frame实现无页面刷新的文件上传相关推荐

vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
无页面刷新文件上传
做后台时遇到这么一个问题,页面里有图片上传的需求,而且上传个数由具体后台页面确定. cank
linux创建和编辑文件,linux基础-第九单元利用vi编辑器创建和编辑正文文件
vi编辑器简介什么是vi vi编辑器的操作模式 vi编辑器的3种基本模式在vi编辑器中光标的移动移动光标位置的键与光标移动间的关系进入插入模式从命令行模式进入插入模式的命令在命令行模式下删 ...
高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间...
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! 接上回 <高性能流媒体服务器EasyDSS前端重构(一 ...
EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(二)-webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
接上篇在上一篇博客中, 我们白手起家, 从零搭建了 webpack + vue + AdminLTE 多页面脚手架. 代码在这里: easydss-web-src , 我为第一篇博客建立了单独的分支 ...
python get请求 url传参_用Python-get方法向页面发起请求，参数传不进去是怎么回事...
源自:4-1 接口测试工具-python-get接口实战用Python-get方法向页面发起请求,参数传不进去是怎么回事 #-*-coding:utf-8-*- import urllib impo ...
淘宝/天猫开放平台新商品发布API接口，商品发布接口，店铺上传接口，利用淘宝新品发布商品接口进行上传商品至淘宝店铺，接口对接方案
一.淘宝/天猫开放平台新商品发布API接口参数说明: 1.通过注册key和secret得到测试账号,然后给到淘宝应用市场的店铺授权购买,然后再平台上面进行店铺添加审核,审核通过后即可用请求链接上传商品 ...
2022-08-01 零基础吉他入门知识(二) 吉他上的十二平均律,给吉他调弦,规范化弹吉他:节拍器,持琴姿势和拨弦手势
文章目录 0.回顾 1.吉他上的十二平均律钢琴上的十二平均律:七个白键+五个黑键组成数量为12的不同音调的音阶吉他上的十二平均律:找出每一根弦上的1234567 吉他上的音阶把位图[记忆] 2.给 ...
html 动态调用php文件,html静态页面调用php文件的方法
html静态页面调用php文件的方法本文实例讲述了html静态页面调用php文件的方法.分享给大家供大家参考.具体方法如下: 静态页面中看上去好像是不能直接调用php文件的,但是却可以使用js调用方 ...