Ajax2异步上传文件--带进度条 - 黑马程序员技术交流社区

[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>

[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();

                }

        }

}

[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>