本帖最后由 chenqi 于 2017-12-12 13:49 编辑
使用传统的form实现文件上传时，表单提交会导致页面刷新，这大多数情况下不是我们想要的效果，今天给大家介绍如何使用ajax实现文件的异步上传：
1、在页面中添加一个表单的文件上传组件和一个上传按钮，点击按钮执行上传的JS函数
[HTML] 纯文本查看 复制代码 <input type="file" id="upFile" />
<input type="button" value="上传" onclick='upload()' />
2、编写ajax代码，将文件上传到服务器
[JavaScript] 纯文本查看 复制代码 <script type="text/javascript">
function upload() {
var file = document.getElementById("upFile");
// 如果没有选择文件，则结束执行
if ( !file.value ) return;
// 创建ajax的核心对象
var xhr = new XMLHttpRequest();
// 设置请求方式、servlet路径、异步方式
xhr.open("POST", "upload", true);
// FormData对象用于封装ajax发送给服务器的数据，支持文件
var formData = new FormData();
// 往FormData对象中添加数据
formData.append("myfile", file.files[0]);
// 发送请求
xhr.send(formData);
}
</script>
3、编写后台的Servlet，将上传的文件保存到服务器，使用的是Apache的fileupload组件，需要引入相关的jar包
[Java] 纯文本查看 复制代码 package cn.itcast.web;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
@SuppressWarnings("all")
@WebServlet("/upload")
public class UploadServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 1、用于解析表单生产表单项的工厂对象
FileItemFactory factory = new DiskFileItemFactory();
// 2. 创建用于结合工厂的实例对象，用来解析request中的数据
ServletFileUpload upload = new ServletFileUpload(factory);
// 防止文件名中文乱码
upload.setHeaderEncoding("UTF-8");
try {
// 3. 使用upload对象来解析request
List<FileItem> items = upload.parseRequest(request);
// 4. 遍历表单项的集合，找到文件，上传到服务器中的某个位置
List<Map<String, String>> list = new ArrayList<Map<String, String>>();
for (FileItem item : items) {
// 判断是否是文件项
if (!item.isFormField()) {
InputStream is = item.getInputStream();
// 获取文件名
String filename = item.getName();
// 设置上传文件的位置
File file = new File("d:/" + filename);
try {
// 执行上传
item.write(file);
} catch (Exception e) {
e.printStackTrace();
} finally {
// 删除临时文件，释放磁盘空间
item.delete();
}
}
}
} catch (FileUploadException e) {
e.printStackTrace();
}
}
}
4、通过以上3步，文件已经可以实现异步上传了，最后添加上传的进度条，后台代码无需修改，以下是html页面中的所有内容
[HTML] 纯文本查看 复制代码 <!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ajax2实现带进度条的文件上传</title>
<style type="text/css">
div.progress {
width:500px;
height:10px;
border-radius:10px;
background-color:#ccc;
overflow:hidden;
position: relative;
margin:5px 0;
}
div.progress div {
height:100%;
width:0px;
background-color:green;
transition: width .6s ease-in;
}
</style>
<script type="text/javascript">
function upload() {
var file = document.getElementById("upFile");
// 如果没有选择文件，则结束执行
if ( !file.value ) return;
// 创建ajax的核心对象
var xhr = new XMLHttpRequest();
// 每传输一定的大小，都会触发这个事件
xhr.upload.onprogress = function(data) {
var total = data.total; // 文件的总大小(字节)
var loaded = data.loaded; // 已传输的大小
var bar = document.getElementById("bar");
// 更新进度条
bar.style.width = loaded / total * 100 + "%";
};
// 设置请求方式、servlet路径、异步方式
xhr.open("POST", "upload", true);
// FormData对象用于封装ajax发送给服务器的数据，支持文件
var formData = new FormData();
// 往FormData对象中添加数据
formData.append("myfile", file.files[0]);
// 发送请求
xhr.send(formData);
}
</script>
</head>
<body>
<input type="file" id="upFile" />
<input type="button" value="上传" onclick='upload()' />
<!-- 用于显示上传进度条的div -->
<div class="progress"><div id="bar"></div></div>
</body>
</html>
最后为大家附上一些比较好的文件上传插件：
http://blueimp.github.io/jQuery-File-Upload/basic.html
http://www.dropzonejs.com/
https://tutorialzine.com/2011/09/html5-file-upload-jquery-php
| 
收藏
淘帖
踩
