如何用JQuery实现CSV上传至指定本地目录，存在则覆盖否则新建？

Hey there! Let's sort out this CSV upload and save task—important heads up: front-end code alone can’t write files directly to your local system (browser security rules block that). You’ll need a backend to handle the file storage part. Here’s a complete, working solution using Node.js/Express for the backend and jQuery for the front-end:

Front-end HTML/JavaScript (index.html) #

First, let’s finish and polish your front-end code to handle file selection and send the CSV to a backend endpoint:

<!DOCTYPE html>
<html>
<head>
    <title>CSV Upload & Save</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <h3>Upload CSV File</h3>
    <input type="file" id="csvInput" accept=".csv" />
    <button id="uploadBtn">Save to Local Directory</button>

    <script>
        $(document).ready(() => {
            $('#uploadBtn').click(() => {
                const file = $('#csvInput')[0].files[0];
                
                if (!file) {
                    alert("Pick a CSV file first!");
                    return;
                }

                // Wrap the file in FormData for upload
                const formData = new FormData();
                formData.append('csvFile', file);

                // Send to backend
                $.ajax({
                    url: '/upload',
                    method: 'POST',
                    data: formData,
                    processData: false, // Don't let jQuery process the file data
                    contentType: false, // Let the browser set the correct content type
                    success: () => alert("File saved successfully!"),
                    error: (err) => alert(`Oops, error: ${err.responseText}`)
                });
            });
        });
    </script>
</body>
</html>

Back-end (Node.js/Express - server.js) #

This backend will receive the uploaded file, save it to your specified directory, and overwrite any existing file with the same name.

1. First, install dependencies:

npm install express multer

2. Create the server file:

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');

const app = express();
const PORT = 3000;

// Replace this with your target local directory path
const TARGET_DIRECTORY = path.join(__dirname, 'my-csv-files');

// Create the directory if it doesn't exist
fs.mkdirSync(TARGET_DIRECTORY, { recursive: true });

// Configure multer to save files (overwrite duplicates)
const storage = multer.diskStorage({
    destination: (req, file, cb) => cb(null, TARGET_DIRECTORY),
    filename: (req, file, cb) => cb(null, file.originalname) // Use original name to overwrite
});

const upload = multer({ storage: storage });

// Serve the front-end page
app.get('/', (req, res) => res.sendFile(path.join(__dirname, 'index.html')));

// Handle CSV upload
app.post('/upload', upload.single('csvFile'), (req, res) => {
    if (!req.file) return res.status(400).send("No file uploaded");
    res.send(`File saved to: ${path.join(TARGET_DIRECTORY, req.file.originalname)}`);
});

// Start the server
app.listen(PORT, () => console.log(`Server running at http://localhost:${PORT}`));

How it works: #

• Front-end: When you select a CSV and click the button, it wraps the file in FormData (required for file uploads) and sends it to the /upload endpoint via AJAX.
• Backend: Multer handles the file upload. We configure it to use the original filename, so if a file with the same name exists in TARGET_DIRECTORY, it gets overwritten automatically. We also add code to create the target directory if it doesn’t exist.

To test: #

1. Save the front-end as index.html and backend as server.js in the same folder.
2. Run node server.js.
3. Open http://localhost:3000 in your browser, select a CSV, and upload it—your file will be saved to the directory you specified, overwriting any duplicates.

If you prefer a different backend language (like Python/Flask or PHP), the core logic is the same: accept the uploaded file, write it to your target directory using the original filename to overwrite existing files.

内容的提问来源于stack exchange，提问作者dmoses