You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

JavaScript多文件上传中获取文件扩展名失败的问题求助

问题分析与修复方案

嘿,我一眼就发现问题所在了——你在JavaScript代码里调用了pathinfo()函数,这是PHP的内置函数,浏览器的JavaScript环境根本不认识它,而且PATHINFO_EXTENSION也是PHP里的常量,JS里同样不存在,这就是功能失效的核心原因。

修复步骤

我们可以用JavaScript原生的字符串处理方法来实现提取文件扩展名的功能,这里给你两种靠谱的方案:

方案1:字符串分割法(简单直观)

通过.分割文件名,取最后一部分就是扩展名,转成小写还能方便后续统一格式判断:

function sendFunc_web(){
 var inp = document.getElementById('vasplus_multiple_files');
 var count = inp.files.length;
 for (var i = 0; i < inp.files.length; ++i) {
 var num = i+1;
 var name = inp.files.item(i).name;
 // 替换原来的pathinfo调用
 var ext = name.split('.').pop().toLowerCase();
 alert("here is a file path: " + ext);
 }
}

方案2:正则表达式法(更严谨)

如果遇到文件名包含多个.的情况(比如project.v1.2.pdf),正则表达式能更准确地提取最后一个.后面的扩展名,还能处理无扩展名的文件:

function sendFunc_web(){
 var inp = document.getElementById('vasplus_multiple_files');
 var count = inp.files.length;
 for (var i = 0; i < inp.files.length; ++i) {
 var num = i+1;
 var name = inp.files.item(i).name;
 // 用正则匹配扩展名,兼容无扩展名的情况
 var match = name.match(/\.([0-9a-z]+)$/i);
 var ext = match ? match[1].toLowerCase() : '';
 alert("here is a file path: " + ext);
 }
}

额外小提示

  • 可以打开浏览器的开发者工具(按F12)查看控制台,能直接看到pathinfo is not defined的错误信息,这是排查JS问题的常用技巧哦。
  • 如果需要验证扩展名是否符合上传要求(和accept属性里的格式对应),可以在拿到ext后加个判断逻辑,比如:
var allowedExts = ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png', 'gif'];
if (!allowedExts.includes(ext)) {
  alert(`文件${name}的扩展名不允许,请上传指定格式的文件`);
}

内容的提问来源于stack exchange,提问作者Pi Network Crytocurrency

火山引擎 最新活动