当前位置: 首页 > 面试题库 >

上传前获取文件大小,图像宽度和高度

谢典
2023-03-14
问题内容

在使用jQuery或JavaScript上传到我的网站之前,如何获取文件大小,图像高度和宽度?


问题答案:

使用 HTML5和 File API

使用URL API的示例

图片来源将是代表Blob对象的URL
<img src="blob:null/026cceb9-edr4-4281-babb-b56cbf759a3d">

const EL_browse  = document.getElementById('browse');

const EL_preview = document.getElementById('preview');



const readImage  = file => {

  if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) )

    return EL_preview.insertAdjacentHTML('beforeend', `Unsupported format ${file.type}: ${file.name}<br>`);



  const img = new Image();

  img.addEventListener('load', () => {

    EL_preview.appendChild(img);

    EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB<div>`);

    window.URL.revokeObjectURL(img.src); // Free some memory

  });

  img.src = window.URL.createObjectURL(file);

}



EL_browse.addEventListener('change', ev => {

  EL_preview.innerHTML = ''; // Remove old images and data

  const files = ev.target.files;

  if (!files || !files[0]) return alert('File upload not supported');

  [...files].forEach( readImage );

});


#preview img { max-height: 100px; }


<input id="browse" type="file" multiple>

<div id="preview"></div>

使用FileReader API的示例

如果您需要图像源作为长Base64编码的数据字符串
<img src="data:image/png;base64,iVBORw0KGg... ...lF/++TkSuQmCC=">

const EL_browse  = document.getElementById('browse');

const EL_preview = document.getElementById('preview');



const readImage = file => {

  if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) )

    return EL_preview.insertAdjacentHTML('beforeend', `<div>Unsupported format ${file.type}: ${file.name}</div>`);



  const reader = new FileReader();

  reader.addEventListener('load', () => {

    const img  = new Image();

    img.addEventListener('load', () => {

      EL_preview.appendChild(img);

      EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB</div>`);

    });

    img.src = reader.result;

  });

  reader.readAsDataURL(file);

};



EL_browse.addEventListener('change', ev => {

  EL_preview.innerHTML = ''; // Clear Preview

  const files = ev.target.files;

  if (!files || !files[0]) return alert('File upload not supported');

  [...files].forEach( readImage );

});


#preview img { max-height: 100px; }


<input id="browse" type="file"  multiple>

<div id="preview"></div>


 类似资料:
  • 如何使用jQuery或JavaScript在上传到我的网站之前获取文件大小、图像高度和宽度?

  • 问题内容: 在使用jQuery或JavaScript上传到我的网站之前,如何获取文件大小,图像高度和宽度? 问题答案: 使用 HTML5和File API 图片来源将是代表Blob对象的URL 使用FileReader API的 如果您需要图像源作为长Base64编码的数据字符串

  • 问题内容: 是否可以在node.js中获取图像的宽度和高度(在服务器端,而不是客户端)?我需要在我正在编写的node.js库中找到图像的宽度和高度。 问题答案: 是的,这是可能的,但是您需要安装GraphicsMagick或ImageMagick。 我都用过,我可以推荐GraphicsMagick,它要快得多。 一旦安装了程序及其模块,就可以执行以下操作来获取宽度和高度。

  • 问题内容: 我有一个JPS,其中用户可以在其中放置图像: 我写了这个js: 可以很好地检查文件类型和大小。现在,我想检查图像的宽度和高度,但是我不能这样做。 我已经尝试过,但是我得到了。用其他方式我得到。 有什么建议? 问题答案: 该文件只是一个文件,您需要像这样创建一个图像: 我认为您意识到只有少数浏览器支持此功能。到现在为止,大多数都是Firefox和Chrome,也可以成为歌剧。 PSURL

  • 问题内容: 我有一个React组件,需要 在渲染之前 预先知道其尺寸 。 当我在jquery中制作一个小部件时,我可以在构建组件时提前获取容器的宽度。 这些容器的尺寸以及页面上的许多其他容器均在CSS中定义。谁在React中定义组件的高度,宽度和位置?我已经习惯了CSS做到这一点并且能够访问它。但是在React中,似乎我只能在组件渲染后访问该信息。 问题答案: 如前所述,在将元素呈现为DOM之前,

  • 我有一个Vue组件,在它里面我有一个img,我需要得到图像尺寸,最好是在显示图像之前(通过宽度或高度来适应容器)。 该代码可能无法工作,映像src可以返回401(还不确定),我们使用代理并从服务器上的存储桶中获取该文件。比如/api/getStorageResource?斑点= 我能做什么呢? 有了链接,我可以通过axios获取图像并将其设置为元素,而不是