js 获取上传图片的尺寸大小
时间: 2024-05-01 12:18:24 浏览: 7
可以通过以下代码获取上传图片的尺寸大小:
```javascript
var input = document.querySelector('input[type="file"]');
input.addEventListener('change', function() {
var file = input.files[0];
var img = new Image();
img.onload = function() {
console.log('图片宽度:' + img.width);
console.log('图片高度:' + img.height);
};
img.src = URL.createObjectURL(file);
});
```
相关问题
js上传文件怎么获取文件大小
在JavaScript中,可以使用File API来获取上传文件的大小。以下是获取文件大小的示例代码:
```javascript
// 获取文件输入框元素
var fileInput = document.getElementById('file-input');
// 监听文件选择事件
fileInput.addEventListener('change', function() {
// 获取文件对象
var file = fileInput.files[0];
// 检查是否选择了文件
if (file) {
// 获取文件大小(以字节为单位)
var fileSize = file.size;
// 输出文件大小(以字节为单位)
console.log('文件大小为:' + fileSize + '字节');
// 可以根据需要进行单位转换,如转换为KB或MB等
var fileSizeInKB = fileSize / 1024;
console.log('文件大小为:' + fileSizeInKB + 'KB');
}
});
```
以上代码首先获取文件输入框元素,然后监听文件选择事件。当用户选择了文件后,通过`fileInput.files[0]`获取选择的文件对象,然后使用`file.size`获取文件大小(以字节为单位)。你可以根据需要进行单位转换,如将字节转换为KB或MB等。
js获取上传文件的绝对路径
在浏览器环境中,由于安全性的考虑,JavaScript无法直接获取上传文件的绝对路径。当用户选择文件并上传时,浏览器会自动创建一个文件对象,JavaScript可以通过这个对象来获取文件的相关信息,但无法获取文件的完整路径。
通常,你可以通过以下方式获取上传文件的相关信息:
1. 使用`<input type="file">`元素获取文件对象:
```html
<input type="file" id="fileInput">
```
```javascript
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0]; // 获取第一个选择的文件对象
console.log(file.name); // 文件名
console.log(file.type); // 文件类型
console.log(file.size); // 文件大小(字节)
```
2. 使用`FileReader`对象读取文件内容:
```javascript
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const content = event.target.result; // 文件内容
console.log(content);
};
reader.readAsText(file); // 以文本形式读取文件内容
```
请注意,这些方法只能获取到文件相关的信息和内容,而无法获取文件在用户本地的绝对路径。