使用拖放功能拖放后如何将csv文件提交给servlet？ [复制]

Posted 2023-02-22

【中文标题】使用拖放功能拖放后如何将csv文件提交给servlet？ [复制]

【英文标题】：How to submit csv file to servlet after being dropped using Drag and Drop function? [duplicate]

【发布时间】：2021-10-23 14:20:43

【问题描述】：

我实现了拖放以提交 csv 文件。 csv 文件将保存在我的服务器文件夹中，内容将被读取并保存在我的数据库中。通常的选择文件夹可以做到这一点，但我想让它拖放。目前我可以拖动名称但我不能将文件放入输入中

上传数据.jsp

    <form action="UploadDataServlet" method="POST" enctype="multipart/form-data">
    <div class="d-flex justify-content-center mt-4 mb-4"> 
    <div class="upload-container">
        <div class="upload-container-border" style="height=100vh">
            <div class="">
            <div class="d-flex justify-content-center mb-2 upload-icon">
                <i class="fas fa-file-upload"></i>
            </div>
            
            <div class="upload-instruction mb-2">
                <div class="text-center upload-text">Drag and Drop the file here</div>
                <div class="text-center or">OR</div>
            </div>
            <div class="d-flex justify-content-center upload-btn">
                <input class="choose-btn" type="file" id="myFile" name="filename" accept=".csv, text/csv" required>
            </div>
            </div>
        </div>
    </div>
    </div>
    <% 
        session.setAttribute("password", acc.getPassword());
        session.setAttribute("username", acc.getUsername());
    %>
    <input type='hidden' name=<% out.print(fileType); %> value=<% out.print(fileType); %>>
    <div class="d-flex justify-content-center mt-4 mb-4">
        <input class="btn btn-secondary btn-sm submit-btn" type="submit" value="Submit">
    </div>
    </form>

script.js

/* Upload Data Page */

const dropArea = document.querySelector(".upload-container"),
input = dropArea.querySelector("input"),
text = dropArea.querySelector(".upload-text");

const inputArea = document.querySelector(".choose-btn");
const or = document.querySelector(".or");
const myFile = document.querySelector("#myFile");

let file;

input.addEventListener("change", function() 
    file = this.file[0];
    dropArea.classList.add("active");
)

dropArea.addEventListener("dragover", (event)=> 
    event.preventDefault();
    dropArea.classList.add("active");
    text.textContent = "Release the File";
)

dropArea.addEventListener("dragleave", ()=> 
    dropArea.classList.remove("active");
    text.textContent = "Drag and Drop the file here";
)

dropArea.addEventListener("drop", (event)=> 
    event.preventDefault();
    myFile.files = event.dataTransfer.files[0];
    //myFiles.file = evt.dataTransfer.files[0];
    showFile();
    )

function showFile() 
    let fileType = file.type;
    let fileName = file.name;
    let validExtensions = ["text/csv", ".csv", "application/vnd.ms-excel"];
    text.textContent = fileName;
    //inputArea.classList.add("d-none");
    //or.classList.add("d-none");
    
    if (!validExtensions.includes(fileType)) 
        alert("Please upload a csv (utf8) file");
        dropArea.classList.remove("active");
        inputArea.classList.remove("d-none");
        or.classList.remove("d-none");
        text.textContent = "Drag and Drop the file here";
     else 
        dropUpload(event);
    


function dropUpload(event) 
    event.stopPropagation();
    event.preventDefault();
    
    var formData = new FormData();
    formData.append("file", event.dataTransfer.files[0]);
    

如果有人可以帮助我，请提前感谢您。我是 jsp 和 servlet 的新手，所以当我找不到任何可以帮助我的东西时，这对我来说是一个很大的问题

【参考方案1】：

拖放是一个零件视图，因此无论您是选择文件还是使用拖放，您都需要手动配置代码 如果您使用 java 脚本 ti 处理它，您需要通过 onSubmit 事件提交它或 $("formname").on("submit",function()

enter code here

);