英文:
File upload area
问题
你好，以下是您的内容的翻译部分：
"Hello I have a problem with my code for uploading files on website. The problem is that I can not get the file. I mean that I can not upload file because the area where must be works it is not working. It is from video tutorial. Can someone look at it and say me where i have a problem? Thank you so much."
"你好，我在上传文件到网站的代码中遇到了问题。问题是我无法获取文件。我的意思是，我无法上传文件，因为应该工作的区域不起作用。这是来自视频教程的代码。有人可以看一下并告诉我哪里有问题吗？非常感谢。"
英文:
Hello I have a problem with my code for uploading files on website. The problem is that I can not get the file. I mean that I can not upload file because the area where must be works it is not working. It is from video tutorial. Can someone look at it and say me where i have a problem? Thank you so much.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
window.addEventListener("upload", ()=>{
const input = document.getElementById("upload");
const filewrapper = document.getElementById("filewrapper");
input.addEventListener("change",(e)=>{
let fileName = e.target.files[0].name;
let filetype = e.target.value.split(".").pop();
fileshow(fileName, filetype);
})
const fileshow=(fileName, filetype)=>{
const showfileboxElem = document.createElement("div");
showfileboxElem.classList.add("showfilebox");
const leftElem = document.createElement("div");
leftElem.classList.add("left");
const fileTypeElem = document.createElement("span");
fileTypeElem.classList.add("filetype")
fileTypeElem.innerHTML=filetype;
leftElem.append(fileTypeElem);
const filetitleElem = document.createElement("h3");
filetitleElem.innerHTML=fileName;
leftElem.append(filetitleElem);
showfileboxElem.append(leftElem);
const rightElem = document.createElement("div");
rightElem.classList.add("right");
showfileboxElem.append(rightElem);
const crossElem = document.createElement("span");
crossElem.innerHTML="&#215;";
rightElem.append(crossElem);
filewrapper.append(showfileboxElem);
crossElem.addEventListener("click", ()=>{
filewrapper.removeChild(showfileboxElem);
})
}
})
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
width: 100%;
min-height: 100vh;
background-color: rebeccapurple;
}
.box {
max-width: 500px;
background: #fff;
padding: 30px;
width: 100%;
border-radius: 5px;
}
.upload-area-title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
font-weight: 600;
}
.uploadlabel {
width: 100%;
min-height: 100px;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 3px dashed aqua;
cursor: pointer;
}
.uploadlabel span {
font-size: 70px;
color: aqua;
}
.uploadlabel p {
color: aqua;
font-size: 20px;
font-weight: 800;
font-family: cursive;
}
.uploaded {
margin: 30px 0;
font-size: 16px;
font-weight: 700;
color: #222;
}
.showfilebox {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 0;
padding: 10px 15px;
box-shadow: #00000d 0px 0px 0px 1px, #d1d5db3d 0px 0px 0px 1px inset;
}
.showfilebox .left {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.filetype {
background: aqua;
color: #fff;
padding: 5px 15px;
font-size: 20px;
text-transform: capitalize;
font-weight: 700;
border-radius: 3px;
}
.left h3 {
font-weight: 600;
font-size: 18px;
color: yellowgreen;
margin: 0;
}
.right span {
background: aqua;
color: #fff;
width: 25px;
height: 25px;
font-size: 25px;
line-height: 25px;
display: inline-block;
text-align: center;
font-weight: 700;
cursor: pointer;
border-radius: 50%;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="" />
<link rel="stylesheet" href="" />
<link rel="stylesheet" href="files/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/d8714c9903.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js"
integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js" integrity="sha512-0mXreXYrXoy9laHoypsAOjuSCqh57vY+kIdE46k8Hw0yRY1EhJyHWUEAqfHOTrPkBpsbO39/ZPw5HITv8mLVOA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="input-box">
<div class="upload-area-title">File</div>
<form action="">
<input type="file" name="upload" accept=".pdf,.jpg,.png,.jpeg" hidden>
<label for="upload" class="uploadlabel">
<span><i class="fa-solid fa-upload"></i></span>
<p>click</p>
</label>
</form>
</div>
<div class="filewrapper">
<h3 class="uploaded">Files</h3>
</div>
</div>
</div>
<script src="files/test.js"></script>
</body>
</html>
<!-- end snippet -->
答案1
得分: 0
以下是您提供的内容的翻译：
问题在于标签（即您看到的上传图标）设置为for="upload"。这意味着它与一个具有id="upload"的输入关联。
然而，该输入具有name="upload"但没有id。
如果您将id添加到输入的属性中，文件选择弹出窗口将出现。
英文:
The problem is that the label (which is the upload icon you see) is set as for="upload". That means it is linked to an input with id="upload".
However, the input has a name="upload" but no id.
If you add that to the input's attributes then the file selection popup appears.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
window.addEventListener("upload", () => {
const input = document.getElementById("upload");
const filewrapper = document.getElementById("filewrapper");
input.addEventListener("change", (e) => {
let fileName = e.target.files[0].name;
let filetype = e.target.value.split(".").pop();
fileshow(fileName, filetype);
})
const fileshow = (fileName, filetype) => {
const showfileboxElem = document.createElement("div");
showfileboxElem.classList.add("showfilebox");
const leftElem = document.createElement("div");
leftElem.classList.add("left");
const fileTypeElem = document.createElement("span");
fileTypeElem.classList.add("filetype")
fileTypeElem.innerHTML = filetype;
leftElem.append(fileTypeElem);
const filetitleElem = document.createElement("h3");
filetitleElem.innerHTML = fileName;
leftElem.append(filetitleElem);
showfileboxElem.append(leftElem);
const rightElem = document.createElement("div");
rightElem.classList.add("right");
showfileboxElem.append(rightElem);
const crossElem = document.createElement("span");
crossElem.innerHTML = "&#215;";
rightElem.append(crossElem);
filewrapper.append(showfileboxElem);
crossElem.addEventListener("click", () => {
filewrapper.removeChild(showfileboxElem);
})
}
})
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
width: 100%;
min-height: 100vh;
background-color: rebeccapurple;
}
.box {
max-width: 500px;
background: #fff;
padding: 30px;
width: 100%;
border-radius: 5px;
}
.upload-area-title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
font-weight: 600;
}
.uploadlabel {
width: 100%;
min-height: 100px;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 3px dashed aqua;
cursor: pointer;
}
.uploadlabel span {
font-size: 70px;
color: aqua;
}
.uploadlabel p {
color: aqua;
font-size: 20px;
font-weight: 800;
font-family: cursive;
}
.uploaded {
margin: 30px 0;
font-size: 16px;
font-weight: 700;
color: #222;
}
.showfilebox {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 0;
padding: 10px 15px;
box-shadow: #00000d 0px 0px 0px 1px, #d1d5db3d 0px 0px 0px 1px inset;
}
.showfilebox .left {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.filetype {
background: aqua;
color: #fff;
padding: 5px 15px;
font-size: 20px;
text-transform: capitalize;
font-weight: 700;
border-radius: 3px;
}
.left h3 {
font-weight: 600;
font-size: 18px;
color: yellowgreen;
margin: 0;
}
.right span {
background: aqua;
color: #fff;
width: 25px;
height: 25px;
font-size: 25px;
line-height: 25px;
display: inline-block;
text-align: center;
font-weight: 700;
cursor: pointer;
border-radius: 50%;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Michal Kozumplík" />
<link rel="stylesheet" href="" />
<link rel="stylesheet" href="" />
<link rel="stylesheet" href="files/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/d8714c9903.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js" integrity="sha512-0mXreXYrXoy9laHoypsAOjuSCqh57vY+kIdE46k8Hw0yRY1EhJyHWUEAqfHOTrPkBpsbO39/ZPw5HITv8mLVOA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="input-box">
<div class="upload-area-title">File</div>
<form action="">
<!-- **** added id="upload" to this i**** -->
<input type="file" name="upload" accept=".pdf,.jpg,.png,.jpeg" hidden id="upload">
<label for="upload" class="uploadlabel">
<span><i class="fa-solid fa-upload"></i></span>
<p>click</p>
</label>
</form>
</div>
<div class="filewrapper">
<h3 class="uploaded">Files</h3>
</div>
</div>
</div>
<script src="files/test.js"></script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论