zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    springboot(六):如何优雅的使用mybatis
    springboot(四):thymeleaf使用详解
    springboot(三):Spring boot中Redis的使用
    springboot(二):web综合开发
    Springboot(一):入门篇
    js判断对象的某个属性是否存在
    查看node.js全局安装的插件路径
    切片地图服务器
    element ui loading加载开启与关闭
    vue 引入 leaflet1.4.0
  • 原文地址:https://www.cnblogs.com/qq450867541/p/12432543.html
Copyright © 2011-2022 走看看