无法修改从输入标签获取的 JavaScript 对象。

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

not able to modify javascript object which i get from input tag

问题

  1. 我正在尝试在我的电商网站中添加上传功能,在我的HTML中我创建了以下代码:
  2. `<input type="file" id="file" accept=".jpg, .png, .jpeg, .svg, .jfif, pjpeg, pjp" multiple><br>`,它会给我一个包含文件的对象,我试图在这个对象中修改文件名,但未能成功,请帮忙
  3. **HTML**

<form id="form">
<input type="text" id="title" placeholder="产品名称"><br>
<input type="number" id="price" placeholder="价格"><br>
<textarea id="description" placeholder="描述" name="description" rows="4" cols="50"></textarea><br>
<input type="file" id="file" accept=".jpg, .png, .jpeg, .svg, .jfif, pjpeg, pjp" multiple><br>
<button type="submit">上传文件</button>
</form>

  1. **JS**

const button = document.querySelector("form").addEventListener('submit',(e)=>{
e.preventDefault();
let userFiles = document.getElementById("file").files;

  1. let i = 1;
  2. for (let element of userFiles) {
  3. // console.log(element.type)
  4. let extension = element.type.slice(6,element.type.length+1);
  5. console.log(&quot;user_file&quot;+i+&quot;.&quot;+extension);
  6. element.name = &quot;user_file&quot;+i+&quot;.&quot;+extension;
  7. console.log(element[&quot;name&quot;]);
  8. i++;
  9. }

});

  1. 我想要以“user_file`i`.extension”的格式更改上传文件的名称。
英文:

i am trying to make upload functionality in my e-commerce website and in my html i have created
&lt;input type=&quot;file&quot; id=&quot;file&quot; accept=&quot;.jpg, .png, .jpeg, .svg, .jfif, pjpeg, pjp&quot; multiple&gt;&lt;br&gt; which gives me a object of items and i am trying to modify the files name within this object but couldn't able to do that please help

HTML

  1. &lt;form id=&quot;form&quot;&gt;
  2. &lt;input type=&quot;text&quot; id=&quot;title&quot; placeholder=&quot;Product Name&quot;&gt;&lt;br&gt;
  3. &lt;input type=&quot;number&quot; id=&quot;price&quot; placeholder=&quot;Price&quot;&gt;&lt;br&gt;
  4. &lt;textarea id=&quot;description&quot; placeholder=&quot;Description&quot; name=&quot;description&quot; rows=&quot;4&quot; cols=&quot;50&quot;&gt;&lt;/textarea&gt;&lt;br&gt;
  5. &lt;input type=&quot;file&quot; id=&quot;file&quot; accept=&quot;.jpg, .png, .jpeg, .svg, .jfif, pjpeg, pjp&quot; multiple&gt;&lt;br&gt;
  6. &lt;button type=&quot;submit&quot;&gt;Upload File&lt;/button&gt;
  7. &lt;/form&gt;

JS

  1. const button = document.querySelector(&quot;form&quot;).addEventListener(&#39;submit&#39;,(e)=&gt;{
  2. e.preventDefault();
  3. let userFiles = document.getElementById(&quot;file&quot;).files;
  4. let i = 1;
  5. for (let element of userFiles) {
  6. // console.log(element.type)
  7. let extension = element.type.slice(6,element.type.length+1);
  8. console.log(&quot;user_file&quot;+i+&quot;.&quot;+extension);
  9. element.name = &quot;user_file&quot;+i+&quot;.&quot;+extension;
  10. console.log(element[&quot;name&quot;]);
  11. i++;
  12. }
  13. });

i want to change the name of uploaded files in the format "user_filei.extension"

答案1

得分: 2

HTMLInputElementfiles属性返回一个包含File对象和File对象的所有属性都是只读的FileList`对象。

参见:
MDN FileList
MDN File

英文:

The files property of the HTMLInputElement's interface returns a FileList object containing File objects and all properties of a File object are read-only, they therefor cannot be changed.

See:
MDN FileList
MDN File

huangapple
  • 本文由 发表于 2023年7月6日 15:57:58
  • 转载请务必保留本文链接:https://go.coder-hub.com/76626678.html
匿名

发表评论

匿名网友

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

确定