文件上传区域

huangapple
go评论106阅读模式
英文:

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 -->

  1. window.addEventListener(&quot;upload&quot;, ()=&gt;{
  2.   const input = document.getElementById(&quot;upload&quot;);
  3.   const filewrapper = document.getElementById(&quot;filewrapper&quot;);
  5.   input.addEventListener(&quot;change&quot;,(e)=&gt;{
  6.     let fileName = e.target.files[0].name;
  7.     let filetype = e.target.value.split(&quot;.&quot;).pop();
  8.     fileshow(fileName, filetype);
  9.   })
  11.   const fileshow=(fileName, filetype)=&gt;{
  12.     const showfileboxElem = document.createElement(&quot;div&quot;);
  13.     showfileboxElem.classList.add(&quot;showfilebox&quot;);
  14.     const leftElem = document.createElement(&quot;div&quot;);
  15.     leftElem.classList.add(&quot;left&quot;);
  16.     const fileTypeElem = document.createElement(&quot;span&quot;);
  17.     fileTypeElem.classList.add(&quot;filetype&quot;)
  18.     fileTypeElem.innerHTML=filetype;
  19.     leftElem.append(fileTypeElem);
  20.     const filetitleElem = document.createElement(&quot;h3&quot;);
  21.     filetitleElem.innerHTML=fileName;
  22.     leftElem.append(filetitleElem);
  23.     showfileboxElem.append(leftElem);
  24.     const rightElem = document.createElement(&quot;div&quot;);
  25.     rightElem.classList.add(&quot;right&quot;);
  26.     showfileboxElem.append(rightElem);
  27.     const crossElem = document.createElement(&quot;span&quot;);
  28.     crossElem.innerHTML=&quot;&amp;#215;&quot;;
  29.     rightElem.append(crossElem);
  30.     filewrapper.append(showfileboxElem);
  32.     crossElem.addEventListener(&quot;click&quot;, ()=&gt;{
  33.       filewrapper.removeChild(showfileboxElem);
  34.     })
  35.   }
  36. })

<!-- language: lang-css -->

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5.   font-family: sans-serif;
  6. }
  8. .wrapper {
  9.   display: flex;
  10.   justify-content: center;
  11.   align-items: center;
  12.   padding: 15px;
  13.   width: 100%;
  14.   min-height: 100vh;
  15.   background-color: rebeccapurple;
  16. }
  18. .box {
  19.   max-width: 500px;
  20.   background: #fff;
  21.   padding: 30px;
  22.   width: 100%;
  23.   border-radius: 5px;
  24. }
  26. .upload-area-title {
  27.   text-align: center;
  28.   margin-bottom: 20px;
  29.   font-size: 20px;
  30.   font-weight: 600;
  31. }
  33. .uploadlabel {
  34.   width: 100%;
  35.   min-height: 100px;
  36.   background-color: #fff;
  37.   display: flex;
  38.   flex-direction: column;
  39.   justify-content: center;
  40.   align-items: center;
  41.   border: 3px dashed aqua;
  42.   cursor: pointer;
  43. }
  45. .uploadlabel span {
  46.   font-size: 70px;
  47.   color: aqua;
  48. }
  50. .uploadlabel p {
  51.   color: aqua;
  52.   font-size: 20px;
  53.   font-weight: 800;
  54.   font-family: cursive;
  55. }
  57. .uploaded {
  58.   margin: 30px 0;
  59.   font-size: 16px;
  60.   font-weight: 700;
  61.   color: #222;
  62. }
  64. .showfilebox {
  65.   display: flex;
  66.   align-items: center;
  67.   justify-content: space-between;
  68.   margin: 10px 0;
  69.   padding: 10px 15px;
  70.   box-shadow: #00000d 0px 0px 0px 1px, #d1d5db3d 0px 0px 0px 1px inset;
  71. }
  73. .showfilebox .left {
  74.   display: flex;
  75.   align-items: center;
  76.   flex-wrap: wrap;
  77.   gap: 10px;
  78. }
  80. .filetype {
  81.   background: aqua;
  82.   color: #fff;
  83.   padding: 5px 15px;
  84.   font-size: 20px;
  85.   text-transform: capitalize;
  86.   font-weight: 700;
  87.   border-radius: 3px;
  88. }
  90. .left h3 {
  91.   font-weight: 600;
  92.   font-size: 18px;
  93.   color: yellowgreen;
  94.   margin: 0;
  95. }
  97. .right span {
  98.   background: aqua;
  99.   color: #fff;
  100.   width: 25px;
  101.   height: 25px;
  102.   font-size: 25px;
  103.   line-height: 25px;
  104.   display: inline-block;
  105.   text-align: center;
  106.   font-weight: 700;
  107.   cursor: pointer;
  108.   border-radius: 50%;
  109. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;cs&quot;&gt;
  4. &lt;head&gt;
  5.   &lt;meta charset=&quot;UTF-8&quot; /&gt;
  6.   &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
  7.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
  8.   &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;
  9.   &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;
  10.   &lt;link rel=&quot;stylesheet&quot; href=&quot;&quot; /&gt;
  11.   &lt;link rel=&quot;stylesheet&quot; href=&quot;&quot; /&gt;
  12.   &lt;link rel=&quot;stylesheet&quot; href=&quot;files/style.css&quot; /&gt;
  13.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  14.   &lt;script src=&quot;https://kit.fontawesome.com/d8714c9903.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  15.   &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js&quot;
  16.     integrity=&quot;sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==&quot;
  17.     crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
  18.   &lt;!--[if lt IE 9]&gt;
  19. 	  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js&quot; integrity=&quot;sha512-0mXreXYrXoy9laHoypsAOjuSCqh57vY+kIdE46k8Hw0yRY1EhJyHWUEAqfHOTrPkBpsbO39/ZPw5HITv8mLVOA==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
  20.     &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js&quot;&gt;&lt;/script&gt;
  21.   &lt;![endif]--&gt;
  22.   &lt;title&gt;Document&lt;/title&gt;
  23. &lt;/head&gt;
  25. &lt;body&gt;
  26.   &lt;div class=&quot;wrapper&quot;&gt;
  27.     &lt;div class=&quot;box&quot;&gt;
  28.       &lt;div class=&quot;input-box&quot;&gt;
  29.         &lt;div class=&quot;upload-area-title&quot;&gt;File&lt;/div&gt;
  30.         &lt;form action=&quot;&quot;&gt;
  31.           &lt;input type=&quot;file&quot; name=&quot;upload&quot; accept=&quot;.pdf,.jpg,.png,.jpeg&quot; hidden&gt;
  32.           &lt;label for=&quot;upload&quot; class=&quot;uploadlabel&quot;&gt;
  33.             &lt;span&gt;&lt;i class=&quot;fa-solid fa-upload&quot;&gt;&lt;/i&gt;&lt;/span&gt;
  34.             &lt;p&gt;click&lt;/p&gt;
  35.           &lt;/label&gt;
  36.         &lt;/form&gt;
  37.       &lt;/div&gt;
  38.       &lt;div class=&quot;filewrapper&quot;&gt;
  39.         &lt;h3 class=&quot;uploaded&quot;&gt;Files&lt;/h3&gt;
  40.       &lt;/div&gt;
  41.     &lt;/div&gt;
  42.   &lt;/div&gt;
  43.   &lt;script src=&quot;files/test.js&quot;&gt;&lt;/script&gt;
  44. &lt;/body&gt;
  46. &lt;/html&gt;

<!-- 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 -->

  1. window.addEventListener(&quot;upload&quot;, () =&gt; {
  2.   const input = document.getElementById(&quot;upload&quot;);
  3.   const filewrapper = document.getElementById(&quot;filewrapper&quot;);
  5.   input.addEventListener(&quot;change&quot;, (e) =&gt; {
  6.     let fileName = e.target.files[0].name;
  7.     let filetype = e.target.value.split(&quot;.&quot;).pop();
  8.     fileshow(fileName, filetype);
  9.   })
  11.   const fileshow = (fileName, filetype) =&gt; {
  12.     const showfileboxElem = document.createElement(&quot;div&quot;);
  13.     showfileboxElem.classList.add(&quot;showfilebox&quot;);
  14.     const leftElem = document.createElement(&quot;div&quot;);
  15.     leftElem.classList.add(&quot;left&quot;);
  16.     const fileTypeElem = document.createElement(&quot;span&quot;);
  17.     fileTypeElem.classList.add(&quot;filetype&quot;)
  18.     fileTypeElem.innerHTML = filetype;
  19.     leftElem.append(fileTypeElem);
  20.     const filetitleElem = document.createElement(&quot;h3&quot;);
  21.     filetitleElem.innerHTML = fileName;
  22.     leftElem.append(filetitleElem);
  23.     showfileboxElem.append(leftElem);
  24.     const rightElem = document.createElement(&quot;div&quot;);
  25.     rightElem.classList.add(&quot;right&quot;);
  26.     showfileboxElem.append(rightElem);
  27.     const crossElem = document.createElement(&quot;span&quot;);
  28.     crossElem.innerHTML = &quot;&amp;#215;&quot;;
  29.     rightElem.append(crossElem);
  30.     filewrapper.append(showfileboxElem);
  32.     crossElem.addEventListener(&quot;click&quot;, () =&gt; {
  33.       filewrapper.removeChild(showfileboxElem);
  34.     })
  35.   }
  36. })

<!-- language: lang-css -->

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5.   font-family: sans-serif;
  6. }
  8. .wrapper {
  9.   display: flex;
  10.   justify-content: center;
  11.   align-items: center;
  12.   padding: 15px;
  13.   width: 100%;
  14.   min-height: 100vh;
  15.   background-color: rebeccapurple;
  16. }
  18. .box {
  19.   max-width: 500px;
  20.   background: #fff;
  21.   padding: 30px;
  22.   width: 100%;
  23.   border-radius: 5px;
  24. }
  26. .upload-area-title {
  27.   text-align: center;
  28.   margin-bottom: 20px;
  29.   font-size: 20px;
  30.   font-weight: 600;
  31. }
  33. .uploadlabel {
  34.   width: 100%;
  35.   min-height: 100px;
  36.   background-color: #fff;
  37.   display: flex;
  38.   flex-direction: column;
  39.   justify-content: center;
  40.   align-items: center;
  41.   border: 3px dashed aqua;
  42.   cursor: pointer;
  43. }
  45. .uploadlabel span {
  46.   font-size: 70px;
  47.   color: aqua;
  48. }
  50. .uploadlabel p {
  51.   color: aqua;
  52.   font-size: 20px;
  53.   font-weight: 800;
  54.   font-family: cursive;
  55. }
  57. .uploaded {
  58.   margin: 30px 0;
  59.   font-size: 16px;
  60.   font-weight: 700;
  61.   color: #222;
  62. }
  64. .showfilebox {
  65.   display: flex;
  66.   align-items: center;
  67.   justify-content: space-between;
  68.   margin: 10px 0;
  69.   padding: 10px 15px;
  70.   box-shadow: #00000d 0px 0px 0px 1px, #d1d5db3d 0px 0px 0px 1px inset;
  71. }
  73. .showfilebox .left {
  74.   display: flex;
  75.   align-items: center;
  76.   flex-wrap: wrap;
  77.   gap: 10px;
  78. }
  80. .filetype {
  81.   background: aqua;
  82.   color: #fff;
  83.   padding: 5px 15px;
  84.   font-size: 20px;
  85.   text-transform: capitalize;
  86.   font-weight: 700;
  87.   border-radius: 3px;
  88. }
  90. .left h3 {
  91.   font-weight: 600;
  92.   font-size: 18px;
  93.   color: yellowgreen;
  94.   margin: 0;
  95. }
  97. .right span {
  98.   background: aqua;
  99.   color: #fff;
  100.   width: 25px;
  101.   height: 25px;
  102.   font-size: 25px;
  103.   line-height: 25px;
  104.   display: inline-block;
  105.   text-align: center;
  106.   font-weight: 700;
  107.   cursor: pointer;
  108.   border-radius: 50%;
  109. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;cs&quot;&gt;
  4. &lt;head&gt;
  5.   &lt;meta charset=&quot;UTF-8&quot; /&gt;
  6.   &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
  7.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
  8.   &lt;meta name=&quot;description&quot; content=&quot;&quot; /&gt;
  9.   &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;
  10.   &lt;meta name=&quot;author&quot; content=&quot;Michal Kozumpl&#237;k&quot; /&gt;
  11.   &lt;link rel=&quot;stylesheet&quot; href=&quot;&quot; /&gt;
  12.   &lt;link rel=&quot;stylesheet&quot; href=&quot;&quot; /&gt;
  13.   &lt;link rel=&quot;stylesheet&quot; href=&quot;files/style.css&quot; /&gt;
  14.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  15.   &lt;script src=&quot;https://kit.fontawesome.com/d8714c9903.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  16.   &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js&quot; integrity=&quot;sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
  17.   &lt;!--[if lt IE 9]&gt;
  18.       &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js&quot; integrity=&quot;sha512-0mXreXYrXoy9laHoypsAOjuSCqh57vY+kIdE46k8Hw0yRY1EhJyHWUEAqfHOTrPkBpsbO39/ZPw5HITv8mLVOA==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
  19.     &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js&quot;&gt;&lt;/script&gt;
  20.   &lt;![endif]--&gt;
  21.   &lt;title&gt;Document&lt;/title&gt;
  22. &lt;/head&gt;
  24. &lt;body&gt;
  25.   &lt;div class=&quot;wrapper&quot;&gt;
  26.     &lt;div class=&quot;box&quot;&gt;
  27.       &lt;div class=&quot;input-box&quot;&gt;
  28.         &lt;div class=&quot;upload-area-title&quot;&gt;File&lt;/div&gt;
  29.         &lt;form action=&quot;&quot;&gt;
  30.           &lt;!-- **** added id=&quot;upload&quot; to this i**** --&gt;
  31.           &lt;input type=&quot;file&quot; name=&quot;upload&quot; accept=&quot;.pdf,.jpg,.png,.jpeg&quot; hidden id=&quot;upload&quot;&gt;
  32.           &lt;label for=&quot;upload&quot; class=&quot;uploadlabel&quot;&gt;
  33.             &lt;span&gt;&lt;i class=&quot;fa-solid fa-upload&quot;&gt;&lt;/i&gt;&lt;/span&gt;
  34.             &lt;p&gt;click&lt;/p&gt;
  35.           &lt;/label&gt;
  36.         &lt;/form&gt;
  37.       &lt;/div&gt;
  38.       &lt;div class=&quot;filewrapper&quot;&gt;
  39.         &lt;h3 class=&quot;uploaded&quot;&gt;Files&lt;/h3&gt;
  40.       &lt;/div&gt;
  41.     &lt;/div&gt;
  42.   &lt;/div&gt;
  43.   &lt;script src=&quot;files/test.js&quot;&gt;&lt;/script&gt;
  44. &lt;/body&gt;
  46. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月13日 16:38:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/76003368.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定