Advertisement

前端JS获取图片文件的实际格式信息

  •  5星
  •     浏览量: 0
  •     大小:None
  •      文件类型:None


简介:
本文介绍了如何使用JavaScript在前端环境中获取上传或选择的图像文件的真实格式信息,包括检查文件类型和读取文件元数据的方法。 通过前端JavaScript使用二进制相关API解析图像数据,读取图片文件的真实格式信息。支持jpg、png、webp、gif、ico、bmp、svg和avif等当前主流浏览器都支持的图片格式,能够准确识别这些格式。这样做可以避免因强制修改后缀名伪造图片格式而导致绕过格式限制并产生错误的情况。

全部评论 (0)

还没有任何评论哟~
客服
客服
  • JS
    优质
    本文介绍了如何使用JavaScript在前端环境中获取上传或选择的图像文件的真实格式信息,包括检查文件类型和读取文件元数据的方法。 通过前端JavaScript使用二进制相关API解析图像数据,读取图片文件的真实格式信息。支持jpg、png、webp、gif、ico、bmp、svg和avif等当前主流浏览器都支持的图片格式,能够准确识别这些格式。这样做可以避免因强制修改后缀名伪造图片格式而导致绕过格式限制并产生错误的情况。
  • 上传类型
    优质
    本工具允许用户上传图片文件,并通过分析返回该图片的真实类型。帮助用户准确识别图片格式和属性。 package com.ylw.p2p.common.utils; import java.awt.image.BufferedImage; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.util.HashMap; import java.util.Iterator; import java.util.Map.Entry; import javax.imageio.ImageIO; import javax.imageio.stream.ImageInputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class FileUtils { public final static Map IMG_FILE_TYPE_MAP = new HashMap<>(); /** * 图片文件上传 * * @param request 请求对象 * @param response 响应对象 * @param photo 文件对象 * @param strtmp 文件名称,例如:xxx.jpg * @param path 文件路径 * @param num 限制大小(字节) */ public static boolean updatePhoto(HttpServletRequest request, HttpServletResponse response, File photo, String strtmp, String path, long num) { File dir = new File(path); if (!dir.exists()) { dir.mkdirs(); } File newFile = new File(dir, strtmp); if (newFile.exists()) newFile.delete(); BufferedInputStream bis = null; FileInputStream fis = null; try { fis = new FileInputStream(photo); FileOutputStream fos = new FileOutputStream(newFile); BufferedImage src = ImageIO.read(fis); ImageIO.write(src, png, fos); } catch (Exception e) { e.printStackTrace(); } finally { if (null != bis) try { bis.close(); } catch (IOException e) { e.printStackTrace(); } if (null != fis) try { fis.close(); } catch (IOException e1) { e1.printStackTrace(); } } return true; } /** * 普通文件上传 * * @param request 请求对象 * @param response 响应对象 * @param photo 文件对象 * @param strtmp 文件名称,例如:xxx.jpg * @param path 文件路径 */ public static boolean updateFile(HttpServletRequest request, HttpServletResponse response, File photo, String strtmp, String path) { File dir = new File(path); if (!dir.exists()) { dir.mkdirs(); } File newFile = new File(dir, strtmp); if (newFile.exists()) newFile.delete(); BufferedOutputStream bos = null; BufferedInputStream bis = null; FileInputStream fis = null; try { fis = new FileInputStream(photo); long s = fis.available(); if (s > 2097152) { // 文件大小限制为2MB return false; } bis = new BufferedInputStream(fis); FileOutputStream fos = new FileOutputStream(newFile); bos = new BufferedOutputStream(fos); byte[] buf = new byte[4096]; int len; while ((len = bis.read(buf)) != -1) { bos.write(buf, 0, len); } } catch (Exception e) { e.printStackTrace(); } finally { if (null != bos) try { bos.flush(); bos.close(); } catch (IOException e2) { e2.printStackTrace(); } if (null != bis) try { bis.close(); } catch (IOException e3) { e3.printStackTrace(); } if (null != fis) try { fis.close(); } catch (IOException e4) { e4.printStackTrace(); } } return true; } /** * 根据文件内容获取文件类型 * * @param file 文件对象 */ public final static String getFileByFile(File file) { byte[] b = new byte[50]; InputStream is = null; try { is = new FileInputStream(file); is.read(b); return getFileTypeByStream(b); } catch (FileNotFoundException e1) { e1.printStackTrace(); } catch (IOException e2) { e2.printStackTrace(); } finally{ if(is != null) try { is.close(); } catch (IOException e5) { } } return ; } }
  • JS日期(YYYYmmDD现代码
    优质
    本篇文章提供了一种简洁的方法来使用JavaScript获取当前日期,并以YYYYmmDD格式显示。文中详细介绍了实现此功能所需的代码和步骤。 接下来为大家介绍如何用JavaScript获取当前日期,并以YYYYmmDD格式显示的实现代码。我觉得这段代码非常实用,现在分享给大家参考。一起看看吧。
  • JS日期(YYYYmmDD现代码
    优质
    本文章详细介绍了如何使用JavaScript编程语言来获取并显示当前日期,并以特定的YYYYmmDD格式进行输出。适合前端开发人员参考学习。 要获取当前日期并以`YYYYmmDD`格式显示的JavaScript代码如下: ```javascript var nowDate = new Date(); var year = nowDate.getFullYear(); var month = (nowDate.getMonth() + 1 < 10) ? 0 + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1; var day = (nowDate.getDate() < 10) ? 0 + nowDate.getDate() : nowDate.getDate(); var dateStr = year + + month.toString().padStart(2, 0) + + day.toString().padStart(2, 0); console.log(dateStr); ``` 这里使用了`padStart()`方法来确保月份和日期总是两位数。如果当前月份或日期不足两位,则在前面补零。 注意,原代码中的连接符有误,已修正为正确的字符串拼接方式。
  • JS验证码功能代码
    优质
    本段代码提供了一个使用JavaScript在网页前端实现发送和验证手机短信验证码的功能示例,适用于用户注册、登录等场景。 这段内容是通过网络搜集整理的,在实际项目中使用了jQuery技术,非常简单且完整,一看就懂。
  • Node.js 本地夹中例演示
    优质
    本实例详细介绍了如何使用Node.js获取并处理本地文件夹中的图片信息,包括读取、筛选和显示所有图片文件的基本方法。适合初学者快速上手。 在Node.js环境中获取本地文件夹下的图片信息是一项常见的任务,在开发Web应用时尤其有用。本示例详细介绍了如何利用Node.js的内置模块和第三方库来实现这一功能。 首先,我们导入了Node.js的核心模块`fs`,它提供了与文件系统交互的能力。使用`fs.readdirSync()`方法可以同步读取指定目录下的所有文件名,并返回一个数组。 接下来引入了一个名为`imageinfo`的第三方模块,该模块可以帮助获取图片的基本信息,例如类型(mimeType)等。在处理图片时,了解其格式对于进一步操作至关重要,如预览、生成缩略图等。 核心函数是`readFileList`,它接收两个参数:当前路径和一个存储文件信息的数组。通过递归调用此函数并使用`fs.readdirSync()`获取目录中的所有文件名后,对每个文件或子目录进行检查。如果它是子目录,则继续递归;如果是普通文件,则将其信息添加到数组中。 在`getFiles`对象中定义了两个关键方法:`getFileList`和`getImageFiles`。其中,`getFileList`遍历指定路径下的所有文件并返回一个包含每个文件的路径和名称的对象数组。而`getImageFiles`在此基础上进一步筛选图片文件,并通过检查mimeType确定其是否为图片。 我们调用`getImageFiles`来获取图片列表,并根据扩展名(如jpg)创建新的对象数组,分别用于存放图片源和视频源。这个示例展示了如何依据类型对资源进行分类处理。 在实际应用中可能需要对此代码进一步调整以满足更复杂的需求,例如支持更多类型的图像格式、添加错误处理机制或优化性能等。此外为了提高程序的健壮性和可维护性,建议使用异步操作(如`fs.promises` API)替代同步版本来避免阻塞事件循环,并考虑在大量文件时采用流式处理或者分批读取以减少内存消耗。 这个示例提供了一个基础框架用于获取本地图片信息,在此基础上开发者可以根据具体需求进行扩展和优化。通过深入理解与实践,可以更好地掌握Node.js在操作文件系统方面的强大功能。
  • JS如何精确页面URL
    优质
    本文介绍了在JavaScript中使用window.location对象及其属性来精准获取和操作当前网页地址的方法。 本段落介绍了多种方法用于准确获取当前页面的URL信息,包括正则法和split拆分法等,有需要的朋友可以参考这些技巧。
  • JS 颜色
    优质
    本教程详细介绍了如何使用JavaScript获取图像中的像素颜色值,并提供了示例代码帮助开发者实现这一功能。 使用Canvas获取图片的颜色,可以是固定位置的颜色,也可以是所有位置的颜色。
  • VB PDF 电子发票
    优质
    本教程介绍如何使用Visual Basic编程语言编写代码来提取PDF格式电子发票中的关键信息,包括但不限于发票号码、日期和金额等。 使用VB读取电子发票信息,用于电子发票管理系统。此程序已经亲测可用,并且是EXE格式的程序而非源码形式,在运行过程中可能会出现提示,请忽略即可。