现在文件上传都是通过Ajax实现。但是利用iframe也可以实现非常类似于Ajax文件上传的效果。
首先,上传文件的组件我使用的是apache的commons-fileupload和commons-io包
先给出利用commons-fileupload组件完成文件上传的后台代码
package com.gxa.edu.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.File;
import java.io.InputStream;
import java.io.FileOutputStream;
import java.util.List;
import java.util.Iterator;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.FileUploadBase.SizeLimitExceededException;
/**
* 文件上传的Servlet,我们使用Apache组织提供的commons-fileupload.jar和commons-io.jar包实现文件上传功能
* @author Administrator
*
*/
public class FileUploadServlet_2 extends HttpServlet {
/**
* Constructor of the object.
*/
public FileUploadServlet_2() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
request.setCharacterEncoding("gb2312");
response.setCharacterEncoding("gb2312");
PrintWriter out = response.getWriter();
final long maxSize = 1024 * 1024 * 5; //定义文件允许上传的大小
final String[] fileExtType = {"jpg" , "JPG" , "gif", "doc" , "docx"}; //定义允许上传文件后缀名
DiskFileItemFactory disk = new DiskFileItemFactory(); //设置实例化一个硬盘工厂
disk.setSizeThreshold(5120); //设置上传文件时临时存放文件到内存缓存区的大小为5kb
String tmpFile = this.getServletContext().getRealPath("/");
System.out.println("临时上传文件路径:" + tmpFile);
File file = new File(tmpFile + "\\" + "tmpFile"); //在javaweb下面建立一个tmpFile文件,该文件用于存放上传时候的临时文件夹
if (!file.exists()) {
file.mkdirs();
}
disk.setRepository(file); //设置缓存的路径或目录
ServletFileUpload sfu = new ServletFileUpload(disk); //初始化上传文件的核心类ServletFileUpload
sfu.setSizeMax(maxSize); //设置文件允许上传的大小
List list = null; //List列表用于存储上传文件表单域中的所有上传值
try {
list = sfu.parseRequest(request); //解析请求过来的上传文件表单域,通过将域中的所有值放到List中
} catch (FileUploadException e) {
e.printStackTrace();
if (e instanceof SizeLimitExceededException) {
out.println("上传文件超过5M");
out.println("<script language='javascript'>");
out.println("window.parent.document.getElementById('msg').innerHTML='<font color=red>上传文件超过5M</font>';");
out.println("window.parent.document.getElementById('file').outerHTML=window.parent.document.getElementById('file').outerHTML;");
out.println("</script>");
return;
}
}
Iterator iterator = list.iterator();
while (iterator.hasNext()) {
FileItem fileItem = (FileItem) iterator.next();
if (fileItem.isFormField()) { //判断是否是一个普遍的表单域,true则表示是普遍表单域而不是文件域
String fieldName = fileItem.getFieldName();
String value = fileItem.getString("gb2312");
} else {
String fileFieldName = fileItem.getFieldName(); //获取文件域的名称
System.out.println("文件域的名称:" + fileFieldName);
String fileName = fileItem.getName(); //上传文件的名称,包括全路径
System.out.println("上传文件的名称:" + fileName);
long fileSize = fileItem.getSize(); //上传文件的大小
System.out.println("上传文件的大小:" + fileSize);
file = new File(tmpFile + "\\" + "fileUploadDir");
if (!file.exists()) {
file.mkdirs();
}
String fileUploadName = fileName.substring(fileName.lastIndexOf("\\") + 1, fileName.length());
FileOutputStream fos = new FileOutputStream(tmpFile + "\\" + "fileUploadDir" + "\\" + fileUploadName);
if (fileItem.isInMemory()) { //判断上传的文件是否已经在内存中
try {
fos.write(fileItem.get());
out.println("上传文件" + fileUploadName + "成功");
} catch (IOException e) {
out.println("上传文件失败");
return;
} finally {
fos.close();
}
} else {
InputStream is = fileItem.getInputStream(); //获取上传文件内容的输入流
int i = 0;
byte[] b = new byte[1024 * 4];
try {
while ((i = is.read(b)) != -1) {
fos.write(b, 0, i);
}
out.println("上传文件:" + fileUploadName + "成功");
out.println("<script language='javascript'>");
out.println("window.parent.document.getElementById('msg').innerHTML='<font color=red>上传文件成功</font>';");
out.println("window.parent.document.getElementById('file').outerHTML=window.parent.document.getElementById('file').outerHTML;");
out.println("</script>");
} catch (IOException e) {
out.println("上传文件失败");
out.println("<script language='javascript'>");
out.println("window.parent.document.getElementById('msg').innerHTML='<font color=red>上传文件失败</font>';");
out.println("window.parent.document.getElementById('file').outerHTML=window.parent.document.getElementById('file').outerHTML;");
out.println("</script>");
} finally {
is.close();
fos.close();
}
}
}
}
out.flush();
out.close();
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occure
*/
public void init() throws ServletException {
// Put your code here
}
}
下面的JSP页面代码
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文件上传-3</title>
</head>
<body>
<form name="form1" enctype="multipart/form-data" method="post" action="servlet/FileUploadServlet_2" target="hidden_iframe">
<input type="file" name="file" id="file">
<input type="submit" value="文件上传"><span id="msg"></span>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none "></iframe>
</form>
</body>
</html>
分享到:
相关推荐
本文介绍了如何结合 JSP 和 AJAX 技术利用 iframe 实现文件上传的功能。通过这种方式,不仅能够保持页面的非阻塞性质,还能够有效处理文件上传过程中可能出现的各种情况,从而提供良好的用户体验。此外,本文还提供...
首先,我们创建一个包含文件上传表单的页面,表单需要设置`target`属性为一个`iframe`的ID,这样提交后会把结果加载到`iframe`中,而不会刷新整个页面。例如: ```html 上传 <iframe id="uploadFrame" style=...
"iframe实现无刷新上传下载"是一个利用IFrame和JQuery技术来创建的项目,它允许用户在不刷新整个页面的情况下进行文件的上传和下载操作,提高了交互效率,同时也保持了页面状态的连续性。 首先,我们要理解什么是...
在本案例中,我们将讨论如何利用`iframe`来实现图片的上传和无刷新展示,以及涉及到的PHP和jQuery技术。 首先,`iframe`的基本用法是在HTML中创建一个`<iframe>`标签,并为其指定`src`属性,指向要加载的页面URL。...
在图片上传场景下,IFrame常用于解决跨域问题和模拟POST提交,因为它可以创建一个独立的上下文环境,使得文件上传操作不会影响到主页面。 以下是实现步骤: 1. 创建一个`<input type="file">`元素,让用户选择需要...
同时,为了利用iframe实现无刷新上传,`target`属性应设置为iframe的ID。 3. **IFrame应用** IFrame作为目标表单提交点,可以让表单提交在背景中进行,不更新整个页面。创建一个隐藏的iframe,将表单的`action`...
这种方式结合ReactJS、AmazeUI和Node.js,利用iframe的特性以及JavaScript的事件处理机制,能够有效地处理文件上传并在上传完成后更新页面状态,而无需整个页面刷新。这在现代Web开发中是一个实用且安全的解决方案。
综上所述,"ASP上传大全之四iframe上传组件"主要探讨了如何在ASP环境中,利用iframe实现无刷新的文件上传,涉及了HTML、JavaScript、ASP及服务器端的安全控制等多个技术层面。理解和掌握这些知识点,将有助于构建...
通过这种方式,我们利用IFrame实现了跨浏览器的AJAX文件上传,即使在不支持FormData和XMLHttpRequest Level 2的浏览器中也能正常工作。这种方法的一个优点是它可以处理大文件上传,因为文件是直接由浏览器提交的,而...
在文件上传场景中,我们可以利用`<iframe>`来承载表单提交的结果,因为它的加载不会影响主页面的状态。 异步上传的核心在于利用JavaScript来监听`<iframe>`的`load`事件。当用户选择文件后,表单提交到`<iframe>`,...
本文介绍了如何使用PHP语言结合iframe标签实现无刷新文件上传的功能。无刷新上传是Web开发中一种常见的需求,它能够让用户在上传文件时不必重新加载整个页面,从而提升用户体验。为了实现这一功能,本文展示了前端...
另一种方法是利用iframe框架进行文件上传。在这种方法中,通过在HTML表单中设置`target`属性为一个iframe的name,当表单提交时,文件上传将在指定的iframe内进行,不会影响到包含它的页面。 - HTML代码中定义了一个...
2. **form+iframe文件上传实现原理:** - 创建一个隐藏的`iframe`,作为表单提交的目标。 - 将`form`的`action`属性设置为处理文件上传的服务器端脚本URL。 - 设置`form`的`target`属性为`iframe`的`name`。 - ...
在实现异步文件上传时,我们会创建一个包含`<input type="file">`的表单,目标设置为一个隐藏的IFRAME。这样,当用户选择文件并提交表单时,文件上传会在IFRAME内完成,而不会影响主页面。同时,我们可以利用...
在Spring MVC 4.2框架中实现AjaxUpload(异步文件上传)是一个常见的需求,它允许用户在不刷新整个页面的情况下进行文件上传,提供更好的用户体验。以下是对这一主题的详细阐述: 1. **AjaxUpload简介**: Ajax...
因此,利用iframe作为目标可以解决这个问题,因为iframe允许跨域提交。 以下是使用AJAX和iframe实现文件上传的基本步骤: 1. **创建隐藏的iframe**:在HTML页面中创建一个隐藏的iframe元素,设置其`name`属性,...
在EXTJS中,可以利用它的组件模型和事件系统来实现更复杂的文件上传及跨框架通信功能。 6. **上传窗口的优化**:为了提升用户体验,可以考虑使用模态对话框(modal dialog)或浮动层(overlay)来代替传统的...
然而,我们可以利用IFRAME(Inline Frame)来模拟实现AJAX式的无刷新文件上传,以达到类似的效果。 首先,我们需要理解AJAX的工作原理。AJAX允许我们在后台与服务器进行通信,更新部分网页内容,而无需刷新整个页面...
需要注意的是,使用iframe进行文件上传的方式虽然可以避免页面刷新,但并不算是真正的Ajax,因为真正的Ajax是利用XMLHttpRequest对象实现的。然而,这种方法在某些情况下(比如跨域上传、处理复杂的表单数据)仍然是...