对input中type=“file“控件修改上传文件名

lt_1111

于 2021-09-28 13:51:35 发布

阅读量4.7k

点赞数 4

分类专栏： JavaScript常用函数文章标签： html5 vue.js html

本文链接：https://blog.csdn.net/lt_1111/article/details/120527557

版权

JavaScript常用函数专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在JavaScript中通过修改`<input type=file>`的file对象name属性为可写状态，从而实现在用户选择文件后自定义文件名，以满足特定需求的上传过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们都知道input中file的name的属性是只读的，要修改名称，需要把file的name属性设置为可写，具体实现如下：

<input type="file" id="files" readonly="readonly" onchange="fileUpload()" />

function fileUpload(){
    let $files = $("files");
    if(files.length > 0){
        let form = new FormData();
        let names = files[0].name.split(".");
        Object.defineProperty(files[0],'name',{
			writable:true,//设置属性为可写
		})
		files[0].name = "指定文件名." + names[names.length-1];
        form.append('file', files[0],files[0].name);
        ... //上传方法
    }
}