在html界面中完成类似ajax方式的上传方式，这种方式的可以通过form+iframe的方式实现，我们通过form表单提交，将数据都输出到iframe上，然后获取里面的json数据，转化为json对象，然后获取里面的信息，设定到界面上。
伪ajax上传效果
上传后,可以获取到frame里面的内容，然后可以做显示或则任何操作了。 
前台代码
前台的file控件比较的丑，我们可以通过自定义的控件，然后通过trigger 来触发原生的上传控件事件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>xx文章</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/plugin/jquery/jquery1.8.3.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/test/index.js"></script>
</head>
<body>
<h2>Hello World!</h2>
<form method="post" action="<%=request.getContextPath() %>/user/upload" id="upload" enctype="multipart/form-data">
<input name="fileLocalFile" accept=".doc" style="display:none;" value="" id="fileLocalFile" class="" type="file">
<!-- 影藏我们的上传文件控件 -->
<input type="button" value="上传" id="uploadBtn"/>
<input type="submit" value="提交"/>
<br/>
<span id="result"></span>
<!-- 影藏的iframe -->
<iframe id="uploadFrame" name="uploadFrame" src="" style="display:none;" style="width: 0px" height="0px">
</iframe>
</form>
</body>
</html>js代码
index.js 的代码内容
$(function(){
//修改form提交的target = frame的 name
document.getElementById("upload").onsubmit = function() {
//target指定的是iframe的名称
document.getElementById("upload").target = "uploadFrame";
}
//监听frame的 onload方法
var oFrm = document.getElementById("uploadFrame");
oFrm.onload = oFrm.onreadystatechange = function() {
if (this.readyState && this.readyState != "complete") return;
else {
//获取iframe里面的内容
var responseText = $('#uploadFrame')[0].contentDocument.body.textContent;
//上传完成后的处理
if(responseText!= ""){
var responseData = JSON.parse(responseText);
console.log(responseData);
$("#result").html("上传后的文件路径:\t"+responseData.filePath);
}
}
}
//监听文件路径变化
$("#fileLocalFile").change(function(){
var filePath = $("#fileLocalFile").val();
if(filePath != ""){
var extionType = filePath.substr(filePath.lastIndexOf(".")+1);
if(extionType != "doc"){
//拡張子がdocではありません。
alert("不是doc的文档。。。");
$("input[name=fileLocalFile]").val("");
return;
}
}
});
//这个时候，点击button，就相当于点了文件上传
$("#uploadBtn").click(function(){
$("#fileLocalFile").trigger("click");
});
});后台代码
这个后台代码是基于springmvc做的，你们也可以按照自己的需求来做。而且json框架是jackson。
package com.yellowcong.controller;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.commons.io.FileUtils;
import org.codehaus.jackson.map.ObjectMapper;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;
/** * *作者:yellowcong *日期:2017/11/23 *時間:13:54:59 *描述: */
@Controller
@RequestMapping("/user")
public class UserController {
@RequestMapping(value="/upload",method=RequestMethod.POST)
public void load(HttpServletResponse response ,MultipartFile fileLocalFile) throws Exception {
//获取文件的名称
String fileName = fileLocalFile.getOriginalFilename();
//获取文件夹路径
String path = this.getSession().getServletContext().getRealPath("resources/upload");
//当文件夹不存在就创建
File outFile = new File(path+File.separator +fileName);
if(!outFile.getParentFile().exists()) {
outFile.getParentFile().mkdirs();
}
//输出到服务器上
FileUtils.copyInputStreamToFile(fileLocalFile.getInputStream(), outFile);
//设定编码
response.setCharacterEncoding("UTF-8");
//表示是json类型的数据
response.setContentType("application/json");
//写json数据到客户端
Map<String,Object> result = new HashMap<String, Object>();
result.put("fileName", fileName);
result.put("filePath", path+File.separator +fileName);
result.put("error", false);
ObjectMapper mapper = new ObjectMapper();
//转换器 //获取到转化后的JSON 数据
String json = mapper.writeValueAsString(result);
response.getWriter().write(json);
}
/** * 在SpringMvc中获取到Session * @return */
public HttpSession getSession(){
//获取到ServletRequestAttributes 里面有
ServletRequestAttributes attrs = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
//获取到Request对象
HttpServletRequest request = attrs.getRequest();
//获取到Session对象
HttpSession session = request.getSession();
return session;
}
}
环境搭建（Ps：给需要的人）
目录结构 
web.xml
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>demo</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list> <!-- Spring mvc -->
<servlet>
<servlet-name>config</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- 配置Spring mvc,如果不配置，就会默认在wWEB-INF/config-servlet.xml -->
<init-param>
<description>spring mvc 配置文件</description>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-mvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>config</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 设定字符编码 -->
<filter>
<filter-name>CharacterFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CharacterFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- spring的监听器，可以通过上下文来获取参数 -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring.xml</param-value>
</context-param>
</web-app>spring.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd ">
<!-- 自动扫描(自动注入) -->
<context:annotation-config />
<context:component-scan base-package="com.yellowcong.*" />
<!--导入mybatis的配置 -->
<!-- <import resource="spring-mybatis.xml"/> <import resource="spring-shiro.xml"/> -->
<import resource="spring-mvc.xml"/>
</beans>spring-mvc.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd">
<mvc:default-servlet-handler />
<!-- 通过Annotation 来控制Controller -->
<mvc:annotation-driven></mvc:annotation-driven>
<context:component-scan base-package="com.yellowcong"/>
<!-- 将静态文件夹制定到某个特别的文件夹中统一处理 ** 表示的是文件夹中的子文件夹中的所有类容 其中location 需要两个 正斜杠 -->
<mvc:resources location="/resources/" mapping="/resources/**" />
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 最大文件大小，-1为无限止(-1) -->
<property name="maxUploadSize" value="5000000" />
<!-- 最大内存大小 (10240) -->
<property name="maxInMemorySize" value="10240" />
<!-- 设置编码 ,默认编码 (ISO-8859-1) -->
<property name="defaultEncoding" value="UTF-8" />
<!--resolveLazily属性启用是为了推迟文件解析，以便在UploadAction 中捕获文件大小异常 -->
<property name="resolveLazily" value="true" />
</bean>
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView"></property>
<property name="prefix" value="/WEB-INF/jsp/"></property>
<property name="suffix" value=".jsp"></property>
</bean>
<bean class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
<property name="exceptionMappings">
<props>
</props>
</property>
</bean>
</beans>pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>yellowcong</groupId>
<artifactId>day11_23</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>day11_23 Maven Webapp</name>
<url>http://maven.apache.org</url>
<!-- 配置国内比较快的 阿里云的Maven仓库 -->
<repositories>
<repository>
<id>aliyunmaven</id>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
</repository>
</repositories> <!-- 共用的配置说明，比如spring版本， 项目名称， jdk版本等 -->
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<spring.version>4.2.5.RELEASE</spring.version>
</properties>
<dependencies> <!-- Spring BEGIN -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-beans</artifactId>
<version>${spring.version}</version>
</dependency> <!-- 导入Spring的orm -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-orm</artifactId>
<version>${spring.version}</version>
</dependency> <!-- Slf4j -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>1.7.5</version>
</dependency> <!-- 配置切面 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>${spring.version}</version>
</dependency> <!---aspectj 面向切向 -->
<dependency>
<groupId>aspectj</groupId>
<artifactId>aspectjrt</artifactId>
<version>1.5.3</version>
</dependency>
<dependency>
<groupId>org.aspectj</groupId>
<artifactId>aspectjweaver</artifactId>
<version>1.8.5</version>
</dependency> <!-- Spring需要的注解 -->
<dependency>
<groupId>javax.annotation</groupId>
<artifactId>javax.annotation-api</artifactId>
<version>1.2</version>
</dependency> <!-- Spring 的测试类 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>${spring.version}</version>
</dependency> <!-- Spring END --> <!-- 配置Spring mvc -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency> <!-- 文件上传 Begin -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2.2</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency> <!-- 文件上传 End -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.10</version>
<scope>test</scope>
</dependency> <!-- JSON解析 -->
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.11</version>
</dependency> <!-- 日志 -->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.16</version>
</dependency>
</dependencies>
<build>
<finalName>day11_23</finalName>
</build>
</project>