I wrote some code to provide image upload function. After uploading, the html page should show the image name of the uploaded file.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>test</h1>
<form id="uploadForm">
<input type="file" id="myFiles" accept="image/*" multiple />
<button>Submit</button>
</form>
<h2></h2>
<script>
const form = document.getElementById("uploadForm")
const sendFiles = async () => {
const myFiles = document.getElementById("myFiles").files
const formData = new FormData()
Object.keys(myFiles).forEach(fk => {
console.log("%%%%%%%%", Object.keys(myFiles), fk, typeof (fk))
formData.append(myFiles.item(fk).name, myFiles.item(fk))
})
const res = await fetch("http://127.0.0.1:3500/upload", {
method: "POST",
body: formData
})
const json = await res.json()
const h2 = document.querySelector("h2")
h2.textContent = `message:${json?.message}`
}
form.addEventListener("submit", (ev) => {
ev.preventDefault()
sendFiles()
})
</script>
</body>
NODE JS CODE:
const express = require("express")
const path = require("path")
const fileUpload = require("express-fileupload")
const app = express()
const PORT = process.env.PORT || 3500
const cors = require("cors")
app.use(cors())
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "index.html"))
})
app.post("/upload",
fileUpload({ createParentPath: true }),
(req, res) => {
const file = req.files
Object.keys(file).forEach(k => {
const fileP = path.join(__dirname, "uploadFolder", file[k].name)
file[k].mv(fileP, (e) => {
if (e) return res.status(500).json({ status: "err!!!!!", message: e })
})
})
return res.json({ message: Object.keys(file).toString() })
})
app.listen(PORT, () => { console.log(`listen on port ${PORT}`) })
I uploaded an image “cookie_screenshot” and submitted it. The html showed the name just for a sec and the page reloaded immediately. How to make the name always displayed on screen?
I use express 4.21.1nodemon 3.1.7.
BEFORE SUBMIT:
DISPLAY NAME FOR INSTANT:
PAGE RELOADED IMMEDIATELY:
