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

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

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

问题

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

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


**JS**

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

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

});


我想要以“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

&lt;form id=&quot;form&quot;&gt;
        &lt;input type=&quot;text&quot; id=&quot;title&quot; placeholder=&quot;Product Name&quot;&gt;&lt;br&gt;
        &lt;input type=&quot;number&quot; id=&quot;price&quot; placeholder=&quot;Price&quot;&gt;&lt;br&gt;
        &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;
        &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;
        &lt;button type=&quot;submit&quot;&gt;Upload File&lt;/button&gt;
    &lt;/form&gt;

JS

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

});

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