Html之form+iframe实现文件上传的方法-yellowcong
来源：互联网 发布：php urlencode 在线 编辑：程序博客网 时间：2024/05/29 08:46
在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>阅读全文
0 0
- Html之form+iframe实现文件上传的方法-yellowcong
- form+iframe实现无刷新上传文件
- form配合iframe实现文件异步上传
- 两种文件上传的实现－Ajax上传和form+iframe
- SpringMvc之文件上传-yellowcong
- html form表单提交后不刷新不跳转的实现方法------巧妙地用iframe
- HTML上传文件的form enctype属性
- html使用iframe实现伪异步表单，实现无刷新上传文件时遇到的问题
- 用iframe实现灵活的上传文件
- 用iframe实现灵活的上传文件
- 用iframe实现灵活的上传文件
- form+iframe解决跨域上传文件
- 使用隐藏的iframe 隐藏form提交,仿AJax无刷新提交,可以实现无刷新上传文件
- 使用隐藏的iframe 隐藏form提交,仿AJax无刷新提交,可以实现无刷新上传文件
- 基于Spring3 MVC实现基于HTML form表单文件上传
- servlet实现form表单的文件上传
- php实现将上传word文件转为html的方法
- Html之Combox选不上的问题-yellowcong
- 基于 HTML5 WebGL 的 3D “弹力”布局
- [iOS]应用内支付(内购)的个人开发过程及坑！
- sizeToFit和sizeThatFit
- 想哭病毒袭击众多高校，态势感知能做什么？
- 数据结构<六>: 树的存储
- Html之form+iframe实现文件上传的方法-yellowcong
- 图片格式详解
- OC中的MRC与ARC机制
- Matlab 进度条效果
- Session简介
- js从json文件中读取数据,淘宝评论json数据
- VMware workstation安装centos联网问题
- 三种常用的插入排序算法--直接插入排序、二分插入排序、希尔排序
- 30分钟git命令入门到放弃
