h5版本下js和servlet实现文件上传的教程
导读：收集整理的这篇文章主要介绍了html5教程-h5版本下js和servlet实现文件上传的教程，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 必须是...
收集整理的这篇文章主要介绍了html5教程-h5版本下js和servlet实现文件上传的教程，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 必须是h5和jsP3.0版本的。因为用到的是新属性，比如获取file对象，后台得到part对象等。
前台jsp
%@ page language="java" contentTyPE="text/htML;
charset=utf-8" pageEncoding="utf-8"%>
!DOCTYPE html PubLIC "-//W3C//DTD HTML 4.01 TransITional//EN" "https://www.w3.org/TR/html4/loose.dtd">
html>
head>
meta http-equiv="Content-type" content="text/html;
charset=utf-8">
title>
Insert title here/title>
script type="text/javascript" src="jquery-3.2.1.min.js">
/script>
/head>
body>
p>
name:input type="text" id="name"/>
文件：input type="file" id="file"/>
br>
button id="BTu" onclick="btu()">
提交/button>
/p>
/body>
script>
function btu(){
VAR name=$("#name").val();
var file=$("#file")[0].files[0];
//新特性，获取文件对象 var fordata=new FormData();
//新特性，得到formData对象，把获取的值扔进去，相当于map fordata.append("name",name);
fordata.append("file",file);
console.LOG(file) $.ajax({
url:"/war-2/UpdataFile", data:fordata, cache:false, PRoceSSData:false, //必须写 contentType:false, //必须写 type:"post", success:function(data){
}
}
) }
/script>
/html>
后台java
package up;
import java.io.File;
import java.io.IOException;
import java.util.Collection;
import javax.servlet.ServletException;
import javax.servlet.annotation.Multipartconfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
/** * Servlet implementation class UpdataFile */ @MultipartConfig(location="E:/") @WebServlet("/UpdataFile") public class UpdataFile extends HttpServlet {
private static final long serialVersionUID = 1L;
private File file;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub System.out.println("1111111111");
}
/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub //得到part对象，这个对象有write的方法，直接写到指定位置。但是千万别忘了写@MultipartConfig(location="E:/")注解，不指定位置默认是写到注解指定的位置。 Part part = request.getPart("file");
//普通的字段可以采用常规的getparamter的方法得到。 System.out.println(new String(request.getParameter("name").getBytes("iso-8859-1"),"utf-8"));
System.out.println(part.getName());
System.out.println(part.getHeader("Content-Disposition"));
System.out.println(part.getSize());
String fileName = getFileNameFromPart(part);
part.write(fileName);
}
//截取文件名 public String getFileNameFromPart(Part part) {
String header = part.getHeader("Content-Disposition");
String fileName = header.substring(header.indexOf("filename=/"")+10, header.lastIndexOf("/""));
return fileName;
}
}
亲测有效。有不懂的可以留言
必须是h5和jsp3.0版本的。因为用到的是新属性，比如获取file对象，后台得到part对象等。
前台jsp
%@ page language="java" contentType="text/html;
charset=utf-8" pageEncoding="utf-8"%>
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
html>
head>
meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
title>
Insert title here/title>
script type="text/javascript" src="jquery-3.2.1.min.js">
/script>
/head>
body>
p>
name:input type="text" id="name"/>
文件：input type="file" id="file"/>
br>
button id="btu" onclick="btu()">
提交/button>
/p>
/body>
script>
function btu(){
var name=$("#name").val();
var file=$("#file")[0].files[0];
//新特性，获取文件对象 var fordata=new FormData();
//新特性，得到formData对象，把获取的值扔进去，相当于map fordata.append("name",name);
fordata.append("file",file);
console.log(file) $.ajax({
url:"/war-2/UpdataFile", data:fordata, cache:false, processData:false, //必须写 contentType:false, //必须写 type:"post", success:function(data){
}
}
) }
/script>
/html>
后台java
package up;
import java.io.File;
import java.io.IOException;
import java.util.Collection;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
/** * Servlet implementation class UpdataFile */ @MultipartConfig(location="E:/") @WebServlet("/UpdataFile") public class UpdataFile extends HttpServlet {
private static final long serialVersionUID = 1L;
private File file;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub System.out.println("1111111111");
}
/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub //得到part对象，这个对象有write的方法，直接写到指定位置。但是千万别忘了写@MultipartConfig(location="E:/")注解，不指定位置默认是写到注解指定的位置。 Part part = request.getPart("file");
//普通的字段可以采用常规的getparamter的方法得到。 System.out.println(new String(request.getParameter("name").getBytes("iso-8859-1"),"utf-8"));
System.out.println(part.getName());
System.out.println(part.getHeader("Content-Disposition"));
System.out.println(part.getSize());
String fileName = getFileNameFromPart(part);
part.write(fileName);
}
//截取文件名 public String getFileNameFromPart(Part part) {
String header = part.getHeader("Content-Disposition");
String fileName = header.substring(header.indexOf("filename=/"")+10, header.lastIndexOf("/""));
return fileName;
}
}
亲测有效。有不懂的可以留言
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： h5版本下js和servlet实现文件上传的教程
本文地址： https://pptw.com/jishu/587168.html