如何在js中获取服务器图片大小 • Worktile社区

worktile

Worktile官方账号

在JavaScript中，获取服务器图片的大小可以通过以下步骤实现：

步骤1：创建一个新的Image对象
首先，需要使用JavaScript的Image对象来加载服务器上的图片。可以通过以下代码来创建一个新的Image对象：

var img = new Image();

步骤2：设置图片的src属性
接下来，需要设置Image对象的src属性为服务器上的图片路径，以加载该图片。可以通过以下代码来设置src属性：

img.src = '服务器图片路径';

注意，这里的服务器图片路径应该是直接指向图片文件的完整路径。

步骤3：等待图片加载完成
由于图片加载是一个异步操作，所以需要等待图片加载完成后再获取其大小。可以使用Image对象的onload事件来监听图片的加载状态。可以通过以下代码来等待图片加载完成：

img.onload = function() {
  // 在图片加载完成后执行的代码
};

步骤4：获取图片的宽度和高度
当图片加载完成后，可以通过Image对象的width和height属性来获取图片的宽度和高度。可以通过以下代码来获取图片的宽度和高度：

var imgWidth = img.width;
var imgHeight = img.height;

注意，获取图片的宽度和高度需要在图片加载完成后进行，否则可能得到错误的结果。

完整示例代码如下：

var img = new Image();

img.src = '服务器图片路径';

img.onload = function() {
  var imgWidth = img.width;
  var imgHeight = img.height;
  
  console.log('图片宽度：' + imgWidth);
  console.log('图片高度：' + imgHeight);
};

通过以上步骤，就可以在JavaScript中获取服务器图片的大小了。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在JavaScript中获取服务器图片的大小可以通过以下几种方法实现：

使用XMLHttpRequest对象：通过创建一个XMLHttpRequest对象，向服务器发送一个HEAD请求，然后检查返回的响应头，其中包含了图片的大小信息。

var xhr = new XMLHttpRequest();
xhr.open('HEAD', '服务器图片路径', true);
xhr.onreadystatechange = function() {
  if (this.readyState == this.DONE) {
    if (this.status == 200) {
      var contentLength = this.getResponseHeader('Content-Length');
      console.log('图片大小为：' + contentLength + '字节');
    }
  }
};
xhr.send();

使用fetch API：通过使用fetch API发送一个HEAD请求，然后通过返回的响应头获取图片的大小信息。

fetch('服务器图片路径', { method: 'HEAD' })
  .then(function(response) {
    var contentLength = response.headers.get('Content-Length');
    console.log('图片大小为：' + contentLength + '字节');
  });

使用Image对象：创建一个Image对象，并将服务器图片的URL赋值给其src属性，然后在加载完成后获取图片的naturalWidth和naturalHeight属性。

var img = new Image();
img.onload = function() {
  console.log('图片宽度为：' + img.naturalWidth + '像素');
  console.log('图片高度为：' + img.naturalHeight + '像素');
};
img.src = '服务器图片路径';

使用服务器端脚本：如果你有服务器端脚本的访问权限，你可以通过服务器端脚本获取图片的大小信息，然后将其传递给前端JavaScript。
例如，在Node.js中，可以使用fs模块读取图片文件的信息：
```
const fs = require('fs');
const path = require('path');

fs.stat('服务器图片路径', (err, stats) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log('图片大小为：' + stats.size + '字节');
});
```
使用第三方库：如果你使用的是现代的前端框架或库，如jQuery、React等，很可能有相应的内置函数或插件可用于获取服务器图片的大小。你可以查阅相关文档以获得更详细的实现方法。

这些方法可以根据你的具体需求选择任意一种来获取服务器图片的大小。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在 JavaScript 中获取服务器图片的大小可以通过以下方法实现。

使用 AJAX 请求获取图片的元数据

使用 XMLHttpRequest 或 Fetch API 发起一个 AJAX 请求获取图片的元数据（header），其中包含了图片的大小信息。

var xhr = new XMLHttpRequest();
xhr.open('HEAD', '图片URL', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      var size = xhr.getResponseHeader('Content-Length');
      console.log('图片大小为：' + size + '字节');
    } else {
      console.log('请求失败');
    }
  }
};
xhr.send();

在 HTML 中加载图片并获取其宽高

在 HTML 中创建一个隐藏的 img 元素，将图片的 URL 赋值给它，并监听它的 onload 事件，在事件回调中获取图片的宽高属性。

var img = new Image();
img.onload = function() {
  var width = img.width;
  var height = img.height;
  console.log('图片的宽度为：' + width + '像素');
  console.log('图片的高度为：' + height + '像素');
};
img.src = '图片URL';

使用 FileReader 对象读取图片并获取文件大小

通过使用 FileReader 对象读取图片文件，并获取文件的大小信息。

var fileInput = document.querySelector('input[type="file"]');
fileInput.onchange = function() {
  var file = fileInput.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    var arrayBuffer = reader.result;
    var size = arrayBuffer.byteLength;
    console.log('图片大小为：' + size + '字节');
  };
  reader.readAsArrayBuffer(file);
};

以上是三种获取服务器图片大小的方法。根据具体的实际情况，选择其中一种适合的方法即可。

1年前 0条评论