Web <input type="file"> FormData 多文件上传

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <base href="<%=basePath%>">

    <title>多文件上传</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    <script type="text/javascript" src="js/jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
</head>

<body>
    <!-- 可以选择多个文件:multiple="multiple";accept:设置可选择的文件类型,用“,”分割多种类型 -->
    <input type="file" id="selectFiles" multiple="multiple" accept=".xml">
    <input type="button" value="上传" onclick="uploadFromLocalToServer()">
</body>

</html>
<script type="text/javascript">
    function uploadFromLocalToServer(){
        //获取选中的文件
        var files = document.getElementById("selectFiles").files;
        
        //创建FormData对象
        var formdata = new FormData();
        //设置formdata
        for(var i=0;i<files.length;i++){
            formdata.append("file["+ i +"]", files[i]);
        }
        
        //上传文件
        $.ajax({
            url: "communication!UploadFileService.action",
            type: 'POST',
            data: formdata,
            dataType: 'json',
            async: false,
            contentType: false,
            processData: false,
            success: function (data) {
                alert(JSON.stringify(data));
                if (data.success == "ok") {
                    alert("上传成功");
                } else {
                    alert("上传失败");
                }
            }
        });
    }
</script>

猜你喜欢

转载自www.cnblogs.com/qq450867541/p/12432543.html