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) {// 创建XMLHttpRequestthis.httpRequest = null;// 回调函数this.onload = dealfun;// 错误处理this.onerror = (onerror) ? onerror : this.defaultError;// 向服务器发送请求(创建连接)this.loadrequest(url, method, params);}
// 向服务器发送请求(创建连接)
net.AjaxRequest.prototype.loadrequest = function(url, method, params) {// 创建XMLHttpRequestif (window.XMLHttpRequest)this.httpRequest = new XMLHttpRequest();else if (window.ActiveXObject)this.httpRequest = new ActiveXObject("Microsoft.XMLHTTP");if (this.httpRequest) {try {// 回调函数var deal = this;this.httpRequest.onreadystatechange = function() {net.AjaxRequest.deal.call(deal);};// 创建XMLHttpRequest成功，发送请求this.httpRequest.open(method, url, true);this.httpRequest.setRequestHeader("Content-Disposition","multipart/form-data");// 发送paramsthis.httpRequest.send(params);} catch (e) {this.onerror.call(this);}}
}
//回调
net.AjaxRequest.deal = function() {if (this.httpRequest.readyState == 4)if (this.httpRequest.status == 200)this.onload.call(this);elsethis.onerror.call(this);
}
// 默认错误处理
net.AjaxRequest.prototype.defaultError = function() {alert("默认错误处理：回调状态码：" + this.httpRequest.readyState + "错误状态码："+ this.httpRequest.status);
//  window.clearInterval(timer);
//  timer = null;
}

html.js(前端页面js)

var timer = null;
// 上传文件处理结果回调,ajax,json,原型
function dealupload() {var p = this.httpRequest.responseText;var p1 = p.substr(0, 5);if (p1 == "完成上传！") {clearInterval(timer);timer = null;alert(p1);return true;} else {document.getElementById("pn").innerHTML = p;document.getElementById("pg").style.width = (p1 * (500 / 100)).toString()+ "px";}
}// 上传文件
function doupload() {var load = new net.AjaxRequest("showprocess.jsp?nocache="+ new Date().getTime(), dealupload, null, "POST");}
function dealcancelupload() {alert("你取消了上传此文件！！！");
}
// 取消文件上传
fileform.onreset = function() {document.getElementById("pg").style.width = "0px";var no = new net.AjaxRequest("cancelupload.jsp?nocache="+ new Date().getTime(), dealcancelupload, null, "POST");
}// 文件预处理上传
function dealfile(fileform) {var file = document.getElementById("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!!!)：

`<form id="fileform"  method="post" action="UploadFile" name="fileform" enctype="multipart/form-data"><br> <%=session.getAttribute("user")+"  " %>请您选择上传文件：&nbsp;&nbsp;&nbsp;&nbsp; <input type="file" name="file" id="file" style="border: 1px solid; margin: 5px; background-color: #eeeeee;" /> <br> <br><div style="text-align: left; margin-left: 120px;"><div>注意：文件不能大于2000M,登录后在传文件</div>当前上传进度：<div style="border-radius:30px;margin-top: 10px; background-color: #aaeeaa; height: 20px; width: 500px; border: 2px solid snow"><div style="border-radius:30px;background-color: black; height: 20px; width: 0px;" id="pg"></div></div>上传情况：&nbsp; <span id="pn"></span></div><br> <input type="button" value="上传" onclick="dealfile(fileform)" /> &nbsp;&nbsp;&nbsp;&nbsp; <input type="reset" value="重新上传(重置)" /></form>

Java后台：（注意与前端文件名字的统一）
1.一个输出session的process的jsp(简单)

`<body><%response.getWriter().write(session.getAttribute("process").toString());%>
</body>`

2.一个获取session的cancel的jsp(简单)

<body>
<% session.setAttribute("cancel", "true"); %>
</body>

3.上传类：

package com.uploadfile;
import java.io.*;
import javax.servlet.*;
import java.util.Iterator;
import java.util.List;
import org.apache.tomcat.util.http.fileupload.*;
@WebServlet(name = "UploadFile", value = "/UploadFile")
public class UploadFile extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// TODO 自动生成的方法存根this.uploadfile(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// TODO 自动生成的方法存根this.uploadfile(req, resp);}@Overrideprotected void service(HttpServletRequest arg0, HttpServletResponse arg1) throws ServletException, IOException {// TODO 自动生成的方法存根super.service(arg0, arg1);}@Overridepublic 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 = req.getSession();//取消文件上传标志session.setAttribute("cancel", "false");//错误信息String error = "";//前端响应session.setAttribute("process", "浏览器上传文件中...请耐心等待");//创建DiskFileItemFactory fac = new DiskFileItemFactory();ServletFileUpload upl = new ServletFileUpload(fac);try {// 解析时间需更新客户端是否取消上传List items = upl.parseRequest(new ServletRequestContext(req));Iterator it = items.iterator();while (it.hasNext()) {FileItem item = (FileItem) it.next();if (!item.isFormField()) {if (item.getName() != null && !item.getName().equals("")) {long loadsize = item.getSize();String name = item.getName();File temp1 = new File(name);//服务器创建写入文件File temp = new File(req.getSession().getServletContext().getRealPath("/LoadFile"), temp1.getName());// 存入文件// 客户端上传文件读取InputStream tempr = item.getInputStream();byte[] b = new byte[1024];// 上传文件存入服务器FileOutputStream wf = new FileOutputStream(temp);// 上传进度double process = 0;int length = 0;boolean flag = true;while ((length = tempr.read(b)) != -1) {if (session.getAttribute("cancel") == "true") {//如果取消了上传session.setAttribute("cancel", "false");session.setAttribute("process", "取消上传中。");wf.flush();wf.close();flag = false;if (temp.exists()) {temp.delete();}break;}process += (length / (double) loadsize) * 100D;wf.write(b);session.setAttribute("process", "服务器写入进度："+(float) process + "%");}if (flag == true) {wf.flush();wf.close();session.setAttribute("process", "完成上传！");}Thread.sleep(500);}}}} catch (Exception e) {// TODO 自动生成的 catch 块e.printStackTrace();error = "服务器出错";}if (!error.equals("")) {session.setAttribute("process", error + "->失败");try {Thread.sleep(1000);} catch (InterruptedException e) {// TODO 自动生成的 catch 块}}//完成服务重定向//req.getRequestDispatcher("WEB-INF/login/welcome.jsp").forward(req, resp);}}

完结。

javaweb实现文件上传，前端与后台的结合实现相关推荐

JavaWeb:实现文件上传与下载
JavaWeb:实现文件上传与下载文件上传前端处理本模块使用到的前端Ajax库为Axio,其地址为GitHub官网. 关于文件上传上传文件就是把客户端的文件发送给服务器端. 在常见情况(不包含文 ...
js文件上传，java后台接收
js文件上传,java后台接收 js文件上传,java后台如何接收前端写法如下 <!DOCTYPE html> <html><head><meta char ...
JavaWeb实现文件上传下载功能实例解析
转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...
Javaweb之文件上传与下载
Javaweb之文件上传与下载 1. 文件上传下载概述 1.1. 什么是文件上传下载所谓文件上传下载就是将本地文件上传到服务器端,从服务器端下载文件到本地的过程.例如目前网站需要上传头像.上传下载图 ...
Django后台管理系统文章相片视频文件上传前端页面
Django后台管理系统文章相片文件上传如需安装运行环境或远程调试,见文章底部个人QQ名片,由专业技术人员远程协助! 前言这篇博客针对<<Django后台管理系统文章相片文件上传& ...
使用JavaWeb将文件上传到后台服务器
文件上传 1.面试:文件上传调优上传的文件存放在一个不能使用外界URL访问的目录下面上传到同一个文件夹中的文件名称应该唯一:使用时间戳/UUID/MD5等手段实现限制上传文件的最大值:因为服务器 ...
java 上传进度,关于 javaweb的文件上传实时显示进度
方法:使用单例保存实时信息.具体的实现方法就是,当用户点击了处理按钮时,在后台开启一个线程进行处理,并且每进行到一步,就向单例中写入当前状态信息.然后编写一个servlet,用于返回单例中的信息,前台 ...
javaweb(八)文件上传
文件上传概述文件上传实际上就是Browser (浏览器)跟 Server(服务器)的数据互动上传:我们把需要上传的资源,发送给服务器,在服务器上保存下来.在智联招聘上填写一个完整的简历还需要上传照 ...
vue上传文件php,php文件上传 – 前端开发，JQUERY特效，全栈开发，vue开发
文件上传一般有下面2种方式: 有两种: 1.标准input表单方式,典型的用$_FILES进行接收: 2.以Base64的方式进行传送,一般是AJAX异步上传. 第一种标准的input表单方式,适用 ...

javaweb实现文件上传，前端与后台的结合实现

javaweb实现文件上传，前端与后台的结合实现相关推荐

最新文章

热门文章