Ajax使用FormData对象上传文件的两种方式

最新推荐文章于 2024-09-16 21:59:57 发布

may_walkaway

最新推荐文章于 2024-09-16 21:59:57 发布

阅读量1.8w

点赞数 8

分类专栏： ajax学习文章标签： ajax

本文链接：https://blog.csdn.net/sinat_27535209/article/details/77462319

版权

ajax学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以下是Demo的项目结构:主要就是一个servlet3.0和一个jsp页面
由于使用的是servlet3.0,所以无需配置web.xml,以下是idnex.jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文件上传demo</title>
<style type="text/css">
h1 {
    text-align: center;
    text-shadow: 2px 2px 2px #999;
}

a {
    text-decoration: none;
    position: relative;
    display: block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    background: #EEE;
    border: 1px solid #999;
    text-align: center;
    background: #EEE;
}

input {
    position: absolute;
    border-radius: 10px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0;
}

#myDiv {
    margin: auto;
    width: 100px;
    height: 30px;
}

a:HOVER {
    background: red;
}

.fileList {
    width: 600px;
    height: 400px;
    overflow: auto;
    position: absolute;
    bottom: 20px;
    right: 20px;
    position: absolute;
    border: 1px solid blue;
    position: absolute;
}

ul {
    list-style: none;
}

ul:after {
    clear: both;
    content: "";
    display: block;
}

ul:nth-child(odd) {
    background: #677077;
    color: #fff;
}

li {
    float: left;
}
</style>

</head>
<body>
    <h1>文件上传demo</h1>
    <div id="myDiv">
        <a href="javascript:;" id="fileUpload">文件上传
         <input type="file" multiple onchange="fileChange(this)" />
        </a>
    </div>
    <div class="fileList" id="fileList">
        <ul>
            <li style="width: 30%">文件名</li>
            <li style="width: 68%">上传情况</li>
        </ul>
    </div>
</body>
<script>
    function fileChange(fileInput) {
        var files = fileInput.files;
        var tempHtml = "";
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            tempHtml += "<ul>"
                    + "<li style='width: 30%'>"
                    + file.name
                    + "</li>"
                    + "<li style='width: 68%'><progress id='p"+i+"' max='100' value=''></progress><span id='sp"+i+"'></span></li></ul>";
            fileUpload(file, i);
        }
        document.getElementById("fileList").innerHTML += tempHtml;
    }
    function fileUpload(file, index) {
        var formData = new FormData();
        formData.append(file.name, file);
        var xhr = new XMLHttpRequest();
        var oldUploaded=0;
        var curUploaded=0;
        var total=0;
        var percent=0;
        xhr.upload.addEventListener("progress",function(event){
            var loaded=event.loaded;
            if(oldUploaded==0){
                total=event.total;
                oldUploaded=event.loaded;
            }
            curUploaded=event.loaded;
            percent=Math.round(event.loaded/event.total*100);
            document.getElementById("p"+index).value=percent;
        });
        var upSpeed=setInterval(function(){
            if(oldUploaded!=0){
                //得到的是一个byte值
                var result=curUploaded-oldUploaded;
                var leave=total-curUploaded;
                var label=document.getElementById("sp"+index);
                label.innerHTML=percent+"%&nbsp;&nbsp;"+Math.round(result/(1024*1024)*100)/100+"M/S&nbsp;&nbsp;剩余"+Math.round(leave/result)+"秒";
                if(total==oldUploaded&&result==0){
                    clearInterval(upSpeed);
                }
                oldUploaded=curUploaded;
            }
        },1000);
        xhr.open("post", "FileUp", true);
        xhr.send(formData);
    }
</script>
</html>

3.FileUp.java类代码如下:

package com.prosay.upload;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Collection;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;

import org.apache.tomcat.util.http.fileupload.FileItem;
import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory;
import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;
import org.apache.tomcat.util.http.fileupload.servlet.ServletRequestContext;

/**
 * 文件上传
 */

@WebServlet("/FileUp") // servlet3.0的规范，使用注解无需配置web.xml
@MultipartConfig // 加上该注解标识这个servlet支持文件上传，否则request.getParts()返回空，后台无法接收到文件
public class FileUp extends HttpServlet {
    private static final long serialVersionUID = 1L;
    /**
     * 后台接收文件方式一，该方式需要@MultipartConfig注解
     */
    public void service(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
        request.setCharacterEncoding("utf-8");
        String savePath = request.getServletContext().getRealPath("/myFiles");
        Collection<Part> files = request.getParts();
        for (Part file : files) {
            file.write(savePath + "/" + file.getName());
        }

    }

    /**
     * 后台接收文件方式二，该方式无需@MultipartConfig注解
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String savePath = request.getServletContext().getRealPath("/myFiles");
        DiskFileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);
        try {
            List<FileItem> items = upload.parseRequest(new ServletRequestContext(request));
            for (FileItem item : items) {
                if (!item.isFormField()) {
                    // System.out.println("savePath = " + savePath);
                    // System.out.println(item.getName());
                    // System.out.println(item.getFieldName());
                    item.write(new File(savePath + "/" + item.getFieldName()));
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

    }

}

注：上传文件测试的时候，这两种后台处理文件的方式任选其一即可，方式一简洁些，但是需要@MultipartConfig注解，而方式二就不需要该注解。

4.布署Demo到tomcat,启动tomcat以后，如果没报错，打开浏览器，访问:http://localhost:8080/0813upload/，效果如下图所示:
这里写图片描述
点击文件上传按钮，选择文件后，开始上传的效果图如下：

上传完成后，在本地磁盘的myFiles文件夹下可以看到上传成功的文件，如下图所示：

本例中需要注意的几个问题：
①取消a标签onclick事件，因为实际上已经不需要a标签的onclick触发file的click了，而是直接就点击到file；
②file标签不需要再设置display:none隐藏，而是通过opacity:0让它完全透明，实际它是浮在a标签之上
③file标签设置position:absolute后要给left:0、top:0，否则file标签不会吻合覆盖a标签导致点击按钮的时候点不到file标签
④index.jsp页面html的声明要用h5的方式：，因为后面使用的进度条progress和FormData对象是h5中的新内容，h4中是没有的；<head></head>标签中还要加上<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，否则页面会出现中文乱码
⑤在FileUp.java类中，如果使用方式一接受文件，一定不要忘记在类上面加上@MultipartConfig注解，否则Collection<Part> files = request.getParts()中的files集合就是空的；如果使用方式二来接受文件，List<FileItem> items = upload.parseRequest(request)这样写的话，items中就是空的，是取不到前台传过来的文件的，必须这样写：List<FileItem> items = upload.parseRequest(new ServletRequestContext(request))，request要通过ServletRequestContext类new出来放进去才可以，自己在网上查了好多资料都是前面那种错误的写法，后来又查了好久才找到后面这种正确的写法。在此特意总结一下，免得以后遇到走弯路了！