[学习交流] Ajax2异步上传文件--带进度条

2017-12-12 12:39 上传

本帖最后由 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

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] Ajax2异步上传文件--带进度条

0 个回复