表单文件上传，ajax文件上传
原创链接：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文件上传的更多相关文章
- 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比
一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...
- html5+php实现文件的断点续传ajax异步上传
html5+php实现文件的断点续传ajax异步上传 准备知识:断点续传,既然有断,那就应该有文件分割的过程,一段一段的传.以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割, ...
- ajax 提交所有表单内容及上传图片（文件），以及单独上传某个图片（文件）
我以演示上传图片为例子: java代码如下(前端童鞋可以直接跳过看下面的html及js): package com.vatuu.web.action; import java.io.File; imp ...
- 头像文件上传 方法一：from表单 方法二：ajax
方法一:from表单 html 设置form表单,内包含头像预览div,内包含上传文件input 设置iframe用来调用函数传参路径 <!--表单提交成功后不跳转处理页面,而是将处理数据返回给 ...
- 前台提交数据（表单数据、Json数据及上传文件）的类型
MIME (Multipurpose Internet Mail Extensions) 是描述内容类型的互联网标准.Clients use this content type or media ty ...
- Web---演示Servlet的相关类、表单多参数接收、文件上传简单入门
说明: Servlet的其他相关类: ServletConfig – 代表Servlet的初始化配置参数. ServletContext – 代表整个Web项目. ServletRequest – 代 ...
- servlet文件上传2——复合表单提交（数据获取和文件上传）
上传文件时表单enctype属性必须要更改为<enctype='multipart/form-data'>:采用post提交表单,元素需要有name属性: 利用第三方jar包(common ...
- Ajax模拟Form表单提交，含多种数据上传
---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...
- spring mvc 文件上传 ajax 异步上传
异常代码: 1.the request doesn't contain a multipart/form-data or multipart/mixed stream, content type he ...
- form表单的一个页面多个上传按钮实例
/* * 图片上传 */ @RequestMapping("/uploadFile") @ResponseBody public String uploadFile(@Reques ...
随机推荐
- tensorflow学习笔记(2)-反向传播
tensorflow学习笔记(2)-反向传播 反向传播是为了训练模型参数,在所有参数上使用梯度下降,让NN模型在的损失函数最小 损失函数:学过机器学习logistic回归都知道损失函数-就是预测值和真 ...
- PhpStorm 配置数据库
点击软件右边的 Database
- Jquery tmpl详解
Jquery tmpl是动态请求数据来更新页面非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 ...
- Java中IO——NIO
一.引入 当引入一些新功能的时候,那说明之前的设计可能还需要完善. 1.阻塞式 在传统的IO输入输出中,如果我们从流中去读数据,而数据源中没有数据时,程序就会阻塞该线程.阻塞式线程的一种基本状态,可以 ...
- 详细解析@Resource和@Autowired的区别 , 以及@Qualifier的作用
(41) (0) 首先 . @Resource是javax.annotation 包中的注解类 , 是jdk中封装的 . @AutoWired是spring的中注解,依赖于spring上下文. 相同 ...
- application/x-www-form-urlencoded从前端到后台
html <form id="userForm1" enctype="application/x-www-form-urlencoded" method= ...
- elasticsearch-1.7.1 (es Windows 64)
elasticsearch-1.7.1 (es Windows 64) https://blog.csdn.net/qq_27093465/article/details/53544541 elast ...
- 【bzoj2768/bzoj1934】[JLOI2010]冠军调查/[Shoi2007]Vote 善意的投票 最小割
bzoj2768 题目描述 一年一度的欧洲足球冠军联赛已经进入了淘汰赛阶段.随着卫冕冠军巴萨罗那的淘汰,英超劲旅切尔西成为了头号热门.新浪体育最近在吉林教育学院进行了一次大规模的调查,调查的内容就是关 ...
- [BZOJ4212]神牛的养成计划
[BZOJ4212]神牛的养成计划 试题描述 Hzwer 成功培育出神牛细胞,可最终培育出的生物体却让他大失所望...... 后来,他从某同校女神 牛处知道,原来他培育的细胞发生了基因突变,原先决定神 ...
- 你试过不用if写代码吗？
我在教新手编程时,喜欢给他们一些小小的挑战,比如:不使用if语句(或者三元运算符.switch语句等)解决一些编程问题.这样做有什么意义吗?事实上,它可以迫使你从不同的角度寻找解决方法,也许可以找到更 ...