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

allway2

已于 2022-03-18 14:25:51 修改

阅读量1.2k

点赞数

文章标签： javascript php css

于 2022-03-18 13:59:11 首次发布

本文链接：https://blog.csdn.net/allway2/article/details/123573151

版权

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

(function () {
    var dropzone = document.getElementById('dropzone');

    var displayUploads = function (data) {
        var uploads = document.getElementById('uploads'),
                anchor,
                x;
        for (x = 0; x < data.length; x = x + 1) {
            anchor = document.createElement('a');
            anchor.href = data[x].file;
            anchor.innerText = data[x].name;

            uploads.appendChild(anchor);
        }
    };



    var upload = function (files) {

        var formData = new FormData(),
                xhr = new XMLHttpRequest(),
                x;
        for (x = 0; x < files.length; x = x + 1) {
            formData.append('file[]', files[x]);
        }

        xhr.onload = function () {
            var data = JSON.parse(this.responseText);
            displayUploads(data);
        };

        xhr.open('post', 'MultiFileUploadServlet');
//      xhr.open('post', 'upload.php');
        xhr.send(formData);

    };

    dropzone.ondrop = function (e) {
        e.preventDefault();
        this.className = 'dropzone';
        upload(e.dataTransfer.files);
    };


    dropzone.ondragover = function () {
        this.className = 'dropzone dragover';
        return false;
    };

    dropzone.ondragleave = function () {
        this.className = 'dropzone';
        return false;
    };
}());

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

    }

}