原创链接：http://www.cnblogs.com/yanqin/p/5345562.html

html代码  index.jsp(表单文件上传)

<form action="shangchuan.jsp" method="post" enctype="multipart/form-data">

		<input type="file" name="file">

		<input type="submit" value="上传">

	</form>

java 代码 : shangchuan.jsp

<%@page import="org.apache.struts2.json.JSONUtil"%>

<%@page import="java.io.File"%>

<%@page import="org.apache.commons.fileupload.FileItem"%>

<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>

<%@page import="org.apache.commons.fileupload.FileItemFactory"%>

<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

	FileItemFactory factory =  new DiskFileItemFactory();

	ServletFileUpload upload = new ServletFileUpload(factory);

	//设置上传文件大小

	//long maxSize = 10 * 1024 * 1024;

	//upload.setSizeMax(maxSize);

	//拿到传过来的所有数据

	List<FileItem> items = upload.parseRequest(request);

	List<Map<String,Object>> maps = new ArrayList<Map<String,Object>>();

	//设置上传文件的路径

	String path = request.getRealPath("resource/"+"123");

	//遍历items

	for(FileItem item : items){

		//判断是不是 普通表单元素

		if(item.isFormField()){

			/*	在form表单那里，将enctype设置成用二进制传输后，无法在用getPararmeter获得普通元素的值，要用如下方法。

				//拿到 普通表单元素的名字

				String name = item.getFieldName();

				//判断是不是 我要的 表单元素

				if(name.equals("username")){

					String value = item.getString();

				}

			*/

		}else{

			//判断是不是真的上传文件了

			if(item.getName()=="" || item.getSize() == 0){

				return;

			}else{

				//如果上传的目录不存在，就创建

				File rootPath = new File(path);

				if(!rootPath.exists()){

					rootPath.mkdirs();

				}

				//获取上传文件的后缀

				String fileName = item.getName();

				String ext = getExt(fileName);

				long fileSize = item.getSize();

				//生成文件名

				String fname = UUID.randomUUID().toString()+ext;

				//上传文件

				rootPath = new File(path,fname);

				item.write(rootPath);

				//返回这次上传的相关信息

				String fpath = "resource/"+"123";

				Map<String,Object> map = new HashMap<String,Object>();

				map.put("name",fileName);

				map.put("size",fileSize);

				map.put("sizeString", fileSize+"字节");

				map.put("url",fpath+"/"+fname);

				maps.add(map);

			}

		}

		out.print(JSONUtil.serialize(maps));

	}

%>

<%!

	//根据名字 得出后缀名

	public String getExt(String name){

		return name.substring(name.lastIndexOf("."), name.length());

	}

%>

html代码，index.jsp    ajax文件上传，带进度条

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML>

<html>

<head>

<title></title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<style type="text/css">

* {

	padding: 0;

	margin: 0;

}

body {

	padding: 50px;

}

.uploadbtn {

	display: inline-block; padding : 20px 40px;

	border: 1px solid #ccc;

	border-radius: 4px;

	text-decoration: none;

	color: #666;

	padding: 20px 40px;

}

</style>

</head>

<body>  <h1>不支持ie</h1>

	<br />

	<br />

	<br />

	<br />

	<br />

	<form action="shangchuan.jsp" method="post"

		enctype="multipart/form-data">

		<a href="javascript:void(0);" class="uploadbtn"	onclick="openFileDialog()">文件上传</a>

		<!-- accept="image/*"  他的作用是限制上传文件的类型 -->

		<input type="file" name="file" id="file" onchange="uploadFile()"> <img src="" id="showimg">

	</form>

	<br />

	<br />

	<br />

	<br />

	<div id="listBox"></div>

	<div id = "percent"></div>

	<script type="text/javascript">

		function openFileDialog() {

			var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;

			if (ie) {

				//如果是ie

				document.getElementById("file").click();

			} else {

				//自定义事件es5中的内容

				var a = document.createEvent("MouseEvents");

				a.initEvent("click", true, true);

				document.getElementById("file").dispatchEvent(a);

			}

		}

		function uploadFile() {

			var files = document.getElementById("file").files;

			var file = files[0];

			//预览上传的文件

			showImage(file, function(data) {

				document.getElementById("showimg").src = data;

			})

			//html5 将文件装到表单里。

			var form = new FormData();

			form.append("file", file);

			//传输到服务端

			var xhr = new XMLHttpRequest();

			xhr.open("post", "shangchuan.jsp", true);

			xhr.onreadystatechange = function() {

				if (this.readyState == 4 && this.status == 200) {

					var data = this.responseText.trim();

					var jsonData = eval("(" + data + ")");

					var html = "";

					for (var i = 0; i < jsonData.length; i++) {

						html += "<li>" + jsonData[i].name + "====="

								+ jsonData[i].sizeString + "</li>"+"<img width='50' height='50' src='"+jsonData[i].url+"'>";

					}

					document.getElementById("listBox").innerHTML += html;

				}

			}

			//监听上传文件的进度

			xhr.upload.addEventListener("progress",progressFunction,false);

			xhr.send(form);

		}

		//进度条  这里进度条没有美化，就显示的百分比。

		function progressFunction(evt){

			var percent = document.getElementById("percent");

			if(evt.lengthComputable){

				//evt.loaded已经上传多久了，event.total：上传文件的总大小

				var p = evt.loaded / event.total;

				percent.innerHTML = Math.floor(p*100)+"%";

			}

		}

		//图片预览

		function showImage(f, callback) {

			var reader = new FileReader();

			reader.onload = (function(theFile) {

				return function(e) {

					//img

					if (callback)callback(e.target.result);

				};

			})(f);

			reader.readAsDataURL(f);

		}

	</script>

</body>

</html>

　　

表单文件上传，ajax文件上传的更多相关文章

  1. 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比

    一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...

  2. html5+php实现文件的断点续传ajax异步上传

    html5+php实现文件的断点续传ajax异步上传 准备知识:断点续传,既然有断,那就应该有文件分割的过程,一段一段的传.以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割, ...

  3. ajax 提交所有表单内容及上传图片（文件），以及单独上传某个图片（文件）

    我以演示上传图片为例子: java代码如下(前端童鞋可以直接跳过看下面的html及js): package com.vatuu.web.action; import java.io.File; imp ...

  4. 头像文件上传 方法一：from表单 方法二：ajax

    方法一:from表单 html 设置form表单,内包含头像预览div,内包含上传文件input 设置iframe用来调用函数传参路径 <!--表单提交成功后不跳转处理页面,而是将处理数据返回给 ...

  5. 前台提交数据（表单数据、Json数据及上传文件）的类型

    MIME (Multipurpose Internet Mail Extensions) 是描述内容类型的互联网标准.Clients use this content type or media ty ...

  6. Web---演示Servlet的相关类、表单多参数接收、文件上传简单入门

    说明: Servlet的其他相关类: ServletConfig – 代表Servlet的初始化配置参数. ServletContext – 代表整个Web项目. ServletRequest – 代 ...

  7. servlet文件上传2——复合表单提交（数据获取和文件上传）

    上传文件时表单enctype属性必须要更改为<enctype='multipart/form-data'>:采用post提交表单,元素需要有name属性: 利用第三方jar包(common ...

  8. Ajax模拟Form表单提交，含多种数据上传

    ---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...

  9. spring mvc 文件上传 ajax 异步上传

    异常代码: 1.the request doesn't contain a multipart/form-data or multipart/mixed stream, content type he ...

  10. form表单的一个页面多个上传按钮实例

    /* * 图片上传 */ @RequestMapping("/uploadFile") @ResponseBody public String uploadFile(@Reques ...

随机推荐

  1. mysql创建用户并手授权

    --创建用户CREATE USER 'test'@'%' IDENTIFIED BY 'test'; --授权GRANT ALL ON *.* TO 'test'@'%'; --修改密码SET PAS ...

  2. ACM训练大纲

    1. 算法总结及推荐题目 1.1 C++ STL • STL容器: set, map, vector, priority_queue, queue, stack, deque, bitset• STL ...

  3. 大数运算——hdu1042N!

    一.题目回顾 题目链接:N! Problem Description Given an integer N(0 ≤ N ≤ 10000), your task is to calculate N!   ...

  4. [译]如何根据条件从pandas DataFrame中删除不需要的行？

    问题来源:https://stackoverflow.com/questions/13851535/how-to-delete-rows-from-a-pandas-dataframe-based-o ...

  5. 最短路径——Bellman-Ford算法以及SPFA算法

    说完dijkstra算法,有提到过朴素dij算法无法处理负权边的情况,这里就需要用到Bellman-Ford算法,抛弃贪心的想法,牺牲时间的基础上,换取负权有向图的处理正确. 单源最短路径 Bellm ...

  6. SQL select 和SQL where语句

    一.SQL SELECT语句 用于从表中选取数据,结果被存储在一共结果表中(称为结果集) 1.语法: SELECT 列名称   FROM  表名称 以及: SELECT * FROM 表名称 注:SQ ...

  7. 【EasyNetQ】- 快速开始

    欢迎来到EasyNetQ.本指南向您展示如何在大约10分钟内启动并运行EasyNetQ. 你可以在GitHub上找到这个快速入门的代码:https://github.com/mikehadlow/Ea ...

  8. HTML5<canvas>标签:使用canvas元素在网页上绘制四分之一圆(3)

    前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: <!doctype html> ...

  9. 2018牛客多校第一场 B.Symmetric Matrix

    题意: 构造一个n*n的矩阵,使得Ai,i = 0,Ai,j = Aj,i,Ai,1+Ai,2+...+Ai,n = 2.求种类数. 题解: 把构造的矩阵当成邻接矩阵考虑. 那么所有点的度数都为2,且 ...

  10. CF763C Timofey and Remoduling

    题目戳这里. 这道题目纯粹是考思维. 若\(2N \le M\),由于答案肯定是\(s,s+d,\dots,s+(N-1)d\),我们任意枚举两个数\(a,b\),不妨设\(b\)在数列中出现在\(a ...