java⽂件上传前端代码_javaweb实现⽂件上传，前端与后台的
结合实现
⼤家好，这是原创的⽂件上传源码哦。
希望给⼤家带来参考价值。
阅读注意：
1.只给出了关键代码(但是绝⼤部分代码)，需要⾃⼰⼩⼩润⾊⼀下。
2.代码分为前端与后台，
3.本⼈初学者，有错，望您指出。
4.后台需要jar包⽀持：
commons-io-1.3.2.jar
commons-fileupload-1.2.1.jar
5.表单属性设置：
enctype=“multipart/form-data”
ajax请求头设置：
this.httpRequest.setRequestHeader(“Content-Disposition”,“multipart/form-data”);
前端代码：
采⽤ajax获取(⾃⼰写的ajax，原理性强)：
ajax.js(ajax重构)
/**
* Ajax重构 多次使⽤，代码重构
*/
var timer = null;
var net = new Object();
// ajax重构
net.AjaxRequest = function(url, dealfun, onerror, method, params) {
// 创建XMLHttpRequest
this.httpRequest = null;
// 回调函数
// 错误处理
// 向服务器发送请求(创建连接)
this.loadrequest(url, method, params);
}
// 向服务器发送请求(创建连接)
net.AjaxRequest.prototype.loadrequest = function(url, method, params) {
// 创建XMLHttpRequest
if (window.XMLHttpRequest)
this.httpRequest = new XMLHttpRequest();
else if (window.ActiveXObject)
web前端和java哪个难this.httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
if (this.httpRequest) {
try {
// 回调函数
var deal = this;
adystatechange = function() {
net.AjaxRequest.deal.call(deal);
};
// 创建XMLHttpRequest成功，发送请求
this.httpRequest.open(method, url, true);
this.httpRequest.setRequestHeader("Content-Disposition","multipart/form-data"); // 发送params
this.httpRequest.send(params);
} catch (e) {
}
}
}
//回调
net.AjaxRequest.deal = function() {
if (adyState == 4)
if (this.httpRequest.status == 200)
else
}
// 默认错误处理
net.AjaxRequest.prototype.defaultError = function() {
alert("默认错误处理：回调状态码：" + adyState + "错误状态码：" + this.httpRequest.status);
//window.clearInterval(timer);
//timer = null;
}
html.js(前端页⾯js)
var timer = null;
// 上传⽂件处理结果回调,ajax,json，原型
function dealupload() {
var p = sponseText;
var p1 = p.substr(0, 5);
if (p1 == "完成上传！") {
clearInterval(timer);
timer = null;
alert(p1);
return true;
} else {
.toString()
+ "px";
}
}
// 上传⽂件
function doupload() {
var load = new net.AjaxRequest("showprocess.jsp?nocache="
+ new Date().getTime(), dealupload, null, "POST");
}
function dealcancelupload() {
alert("你取消了上传此⽂件");
}
// 取消⽂件上传
var no = new net.AjaxRequest("cancelupload.jsp?nocache=" + new Date().getTime(), dealcancelupload, null, "POST");
}
// ⽂件预处理上传
function dealfile(fileform) {
var file = ElementById("file");
if (document.fileform.file.value == "") {
alert("请选择上传⽂件");
return false;
}
var filesize = file.files[0].size;
if (filesize > 2000 * 1024 * 1024) {
alert("请选择⼩于2000MB的⽂件");
return false;
} else {
timer = window.setInterval("doupload()", 300);
fileform.submit();
}
}
前端表单代码(记得引⼊以上js)：
`请您选择上传⽂件：
注意：⽂件不能⼤于2000M，登录后在传⽂件
当前上传进度：
上传情况：
Java后台：(注意与前端⽂件名字的统⼀)
1.⼀个输出session的process的jsp(简单)
`
`
2.⼀个获取session的cancel的jsp(简单)
`
3.上传类：
package com.uploadfile;
import java.io.*;
import javax.servlet.*;
import java.util.Iterator;
import java.util.List;
import at.util.http.fileupload.*;
@WebServlet(name = "UploadFile", value = "/UploadFile")
public class UploadFile extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO ⾃动⽣成的⽅法存根
this.uploadfile(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO ⾃动⽣成的⽅法存根
this.uploadfile(req, resp);
}
@Override
protected void service(HttpServletRequest arg0, HttpServletResponse arg1) throws ServletException, IOException { // TODO ⾃动⽣成的⽅法存根
super.service(arg0, arg1);
}
@Override
public void destroy() {
// TODO ⾃动⽣成的⽅法存根
super.destroy();
}
@SuppressWarnings("rawtypes")
public void uploadfile(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//解决乱码
req.setCharacterEncoding("UTF-8");
resp.setCharacterEncoding("UTF-8");
HttpSession session = Session();
//取消⽂件上传标志
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论