window.URL.createObjectURL获取到的文件缺少文件名
时间: 2023-11-11 20:54:50 浏览: 133
浅谈js图片前端预览之filereader和window.URL.createObjectURL
是的,`window.URL.createObjectURL` 方法返回的是一个表示文件的 URL,但是不包含文件名。它只是提供了一个指向文件内容的临时 URL。如果你想要获取文件名,你需要使用其他方法来解析 URL 或者获取文件对象的属性,例如 `name` 属性。以下是一个示例代码:
```javascript
// 创建一个 input 元素用于选择文件
const input = document.createElement('input');
input.type = 'file';
// 监听文件选择事件
input.addEventListener('change', function() {
const file = input.files[0];
// 获取文件名
const fileName = file.name;
// 创建对象URL
const url = window.URL.createObjectURL(file);
console.log('文件名:', fileName);
console.log('对象URL:', url);
});
// 将 input 元素添加到页面中
document.body.appendChild(input);
```
上述代码创建了一个 `<input>` 元素,用于选择文件。当用户选择了文件后,监听 `change` 事件,并从 `input.files` 属性中获取文件对象。然后,可以通过 `file.name` 属性获取文件名,并使用 `window.URL.createObjectURL` 创建对象 URL。最后,可以在控制台中打印文件名和对象 URL。
阅读全文