我們如何使用 javascript onclick 在項目目錄中添加文件？

Question

我們怎么可能使用 javascript 在我們的項目目錄中添加一個文件 onclick 可能嗎？ 需要你們的幫助。 我對此做了很多研究，但沒有任何幫助。 如果可能的話，我不想在我的表單中添加 enctype multipart/form-data，因為它不允許我將數據存儲到 mysql。

<form class="add-music-form" action="/save" method="POST">
    <div class="form-group">
        <div class="song-feaured-image">
            <input style="display: none;" type="file" accept="image/*" id="file" name="featured_img"  onchange="loadFile(event)" required>
            <img id="output" class="image-preview" width="130" src="/img/rock-on.jpg" />
            <label for="file" class="attach_file" style="cursor: pointer">
            <i class="material-icons">attach_file</i></label>
        </div>
    </div>

    <div class="form-group">
        <input type="text" class="form-control" placeholder="Title" id="title" name="title" required>
    </div>

    <div class="form-group">
        <input type="text" class="form-control" placeholder="Band name" id="band_name" name="band_name" required>
    </div>

    <div class="custom-file">
        <input type="file" class="custom-file-input" id="customFile" name="audio" required>
        <label class="custom-file-label" for="customFile">Select audio file</label>
    </div>
    <div class="mt-3">
        <button type="submit" class="btn btn-primary" onclick="submit()">Submit</button>
        <a onclick="cancel()" class="btn btn-default">Cancel</a>
    </div>
</form>

<script>
function submit() {
    let upload_img = document.getElementById("output");
    //--------------???----------------//
}
</script>

應用程序.js

app.post('/save', (req, res) => {
    let sql = "INSERT INTO `music`(`featured_img`, `title`, `band_name`, `audio`) VALUES ('" + req.body.featured_img + "', '"+req.body.title+"', '"+req.body.band_name+"', '"+req.body.audio+"')";
    let query = connection.query(sql, (err, results) => {
        if(err) throw err;
        res.redirect('/');
    });
});

Answer 1

（注意：我在使用 EJS 時遇到了麻煩）

/客戶端/index.html

<form class="add-music-form" action="/save" method="POST">
    <div class="form-group">
        <div class="song-featured-image">
            <input style="display: none;" type="file" accept="image/*" id="file" name="featured_img" required>
            <img id="output" class="image-preview" width="130" src="/img/rock-on.jpg" />
            <label for="file" class="attach_file" style="cursor: pointer">
            <i class="material-icons">attach_file</i></label>
        </div>
    </div>
    <div class="mt-3">
        <button type="submit" class="btn btn-primary">Submit</button>
        <a onclick="cancel()" class="btn btn-default">Cancel</a>
        </div>
</form>

應用程序.js

var express = require('express');
const fileUpload = require('express-fileupload');
var app = express();

app.use(fileUpload());
app.use(express.static('client'));

app.listen(80, function () {
    console.log("Server loaded.");
});

app.post('/save', (req, res) => {
    let fileName = req.files.featured_img.name;
    let data = req.files.featured_img.data;
    console.log(fileName);
    console.log(data);
    // Do SQL
});