使用 JavaScript 和 PHP或Java Servlet 进行拖放文件上传

末蓝、 2023-09-30 09:49 11阅读 0赞

index.html

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
            <link href="style.css" rel="stylesheet" type="text/css"/>
        </head>
        <body>
            <div class="container">
                <div class="row">
                    <div id="uploads"></div>
                    <div class="dropzone" id="dropzone">
                        Drop files fere to upload
                    </div>
                </div>
            </div>
            <script src="js_script.js" type="text/javascript"></script>
        </body>
    </html>

style.css

body{
        font-family: "Arial" ,sans-serif;
    }
    
    .dropzone{
        width: 100%;
        height:300px;
        border: 2px dashed #ccc;
        color: #ccc;
        text-align: center;
        line-height: 300px;
        margin: 20px auto;
    
    }
    
    .dropzone.dragover{
        border-color: #000;
        color: #000;
    }

js\_script.js

upload.php

<?php
    
    header("Content-Type: application/json");
    $uploaded = array();
    if (!empty($_FILES['file']['name'][0])) {
    
        foreach ($_FILES['file']['name'] as $position => $name) {
    
            if (move_uploaded_file($_FILES['file']['tmp_name'][$position], 'uploads/' . $name)) {
                $uploaded[] = array(
                    'name' => $name,
                    'file' => 'uploads/' . $name
                );
            }
        }
    }
    echo json_encode($uploaded);
    error_log(json_encode($uploaded));
    ?>

MultiFileUploadServlet.java

import java.io.File;
    import java.io.IOException;
    import java.util.ArrayList;
    import java.util.HashMap;
    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.json.JSONArray;
    import org.json.JSONObject;
    
    /**
     *
     * @author javacodepoint
     *
     */
    @WebServlet("/MultiFileUploadServlet")
    @MultipartConfig(fileSizeThreshold = 1024 * 1024 * 2, // 2MB
            maxFileSize = 1024 * 1024 * 500, // 500MB
            maxRequestSize = 1024 * 1024 * 1024) // 1GB
    public class MultiFileUploadServlet extends HttpServlet {
    
        /**
         * Location to save uploaded files on server
         */
        private static final String UPLOAD_PATH = "C:/MultiFileUpload";
    
        /**
         * Method to get file name from HTTP header content-disposition
         */
        private String getFileName(Part part) {
            String contentDisp = part.getHeader("content-disposition");
            String[] items = contentDisp.split(";");
            for (String s : items) {
                if (s.trim().startsWith("filename")) {
                    return s.substring(s.indexOf("=") + 2, s.length() - 1);
                }
            }
            return null;
        }
    
        protected void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            try {
                File uploadsPath = new File(UPLOAD_PATH);
                if (!uploadsPath.exists()) {
                    //create upload folder if not exist.
                    uploadsPath.mkdir();
                }
    
                JSONArray array = new JSONArray();
                for (Part part : request.getParts()) {
                    String fileName = getFileName(part);
                    if (fileName != null) {
                        part.write(UPLOAD_PATH + File.separator + fileName);
                        System.out.println("name:" + fileName);
                        System.out.println("file:" + UPLOAD_PATH + File.separator + fileName);
    
                        JSONObject user1 = new JSONObject();
                        user1.put("name", fileName);
                        user1.put("file", UPLOAD_PATH + File.separator + fileName);
    
                        array.put(user1);
    
                    }
                }
    
                System.out.println(array.toString());
                System.out.println("File uploaded successfully!");
                response.setContentType("application/json");
                response.getWriter().write(array.toString());
            } catch (Exception e) {
                System.err.println("Error while uploading files!");
                e.printStackTrace();
            }
    
        }
    
    }

import java.io.File;
    import java.io.IOException;
    import java.util.ArrayList;
    import java.util.HashMap;
    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.json.JSONArray;
    import org.json.JSONObject;
    
    /**
     *
     * @author javacodepoint
     *
     */
    @WebServlet("/MultiFileUploadServlet")
    @MultipartConfig(fileSizeThreshold = 1024 * 1024 * 2, // 2MB
            maxFileSize = 1024 * 1024 * 500, // 500MB
            maxRequestSize = 1024 * 1024 * 1024) // 1GB
    public class MultiFileUploadServlet extends HttpServlet {
    
        /**
         * Location to save uploaded files on server
         */
        private static final String UPLOAD_PATH = "C:/MultiFileUpload";
    
        /**
         * Method to get file name from HTTP header content-disposition
         */
        private String getFileName(Part part) {
            String contentDisp = part.getHeader("content-disposition");
            String[] items = contentDisp.split(";");
            for (String s : items) {
                if (s.trim().startsWith("filename")) {
                    return s.substring(s.indexOf("=") + 2, s.length() - 1);
                }
            }
            return null;
        }
    
        protected void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            try {
                File uploadsPath = new File(UPLOAD_PATH);
                if (!uploadsPath.exists()) {
                    //create upload folder if not exist.
                    uploadsPath.mkdir();
                }
                ArrayList<HashMap<String, String>> dataMap = new ArrayList<HashMap<String, String>>();
                for (Part part : request.getParts()) {
                    String fileName = getFileName(part);
                    if (fileName != null) {
                        part.write(UPLOAD_PATH + File.separator + fileName);
                        System.out.println("name:" + fileName);
                        System.out.println("file:" + UPLOAD_PATH + File.separator + fileName);
                        HashMap<String, String> data1 = new HashMap<String, String>();
                        data1.put("name", fileName);
                        data1.put("file", UPLOAD_PATH + File.separator + fileName);
                        dataMap.add(data1);
    
                    }
                }
                List<JSONObject> jsonObj = new ArrayList<JSONObject>();
    
                for (HashMap<String, String> data : dataMap) {
                    JSONObject obj = new JSONObject(data);
                    jsonObj.add(obj);
                }
    
                JSONArray test = new JSONArray(jsonObj);
    
                System.out.println(test.toString());
                System.out.println("File uploaded successfully!");
                response.setContentType("application/json");
                response.getWriter().write(test.toString());
            } catch (Exception e) {
                System.err.println("Error while uploading files!");
                e.printStackTrace();
            }
    
        }
    
    }

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/57b27f52696347efbfb39428c4da424f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16