Question

HTML

<form>
<input type="file" onchange="return validateSize()" id="uploadFile" accept="image/*">
<button type="submit">Send</button>
</form>

JavaScript

function validateSize() {
const file = document.querySelector('#uploadFile');
const file_name = file.value;
const extension = file_name.split('.').pop().toLowerCase();
const size = file.files[0].size;
const allowedFormats = ["jpg", "jpeg"];
if (((size/1024)/1024) > 4) {
    // works perfect
    alert("Please optimize your image to maximum 4MB!");
    file.value = "";
    return false;
}
else if (!(allowedFormats.indexOf(extension) > -1)) {
    // works perfect
    alert("Please save your image in JPG format!");
    file.value = "";
    return false;
}
else if ((/^[a-z0-9\s\,\.\-\_]{5,50}\.(?:jpg|jpeg)$/i.test(file_name)) ==  false) {
    // this IS NOT working
    alert("Filename can have only letters (a-z), numbers, spaces, dots, '-' and '_'!");
    file.value = "";
    return false;
}
}

大小验证工作。

扩展验证工作。

文件名验证无效。

我希望有这种正则表达式条件：

/^[a-z0-9\s\,\.\-\_]{5,50}\.(?:jpg|jpeg)$/i

如果文件名包含正则表达式中未包含的其他字符，则返回警报。

谢谢！

PS：您可以在https://jsfiddle.net/jacob19/a3fLog6r/5/处测试代码，看看是否会找到解决方案。

Answer 1

您不是在检查文件名，而是在假路径（通常类似于"C:\fakepath\file_name.ext"）中进行检查。

可以通过获取的File对象的.name属性访问文件名：

var input = document.querySelector('input');
input.onchange = function(e) {
  // grab the File object that has been selected by the user
  var file_object = input.files[0];
  // here you have the file's name
  var file_name = file_object.name;

  // now you can do your check
  if ((/^[a-z0-9\s\,\.\-\_]{5,50}\.(?:jpg|jpeg)$/i.test(file_name)) == false) {
    alert("Filename can have only letters (a-z), numbers, spaces, dots, '-' and '_'!");
    input.value = "";
  }
  console.log("for info, the input's value was ", input.value);
  console.log("while the file's name was ", file_name);
};

<input type="file">

Answer 2

您的正则表达式需要字母或数字，并需要“空格”，逗号，点，-，_ 我想你是这个意思

   /[a-zA-Z0-9\s\,\.\-\_]{5,50}\.(?:jpg|jpeg)$/i

Answer 3

您在正则表达式中犯了一个小错误。这一点：

[a-zA-Z0-9]\s\,\.\-\_

意思是：任何小写字母，任何大写字母或任何数字，后跟空格字符，逗号，句点，破折号和下划线。

[]运算符指示一个选择。您应该移动其中的所有内容。

A-Z语法只是ABCD...WXYZ的简写。

将表达式部分更改为：

[a-zA-Z0-9\s\,\.\-\_]

Answer 4

您的正则表达式似乎是正确的。完成所有条件后，您在功能结束时错过了return true。试试这个：

function validateSize() {
const file = document.querySelector('#uploadFile');
const file_name = file.value;
const extension = file_name.split('.').pop().toLowerCase();
const size = file.files[0].size;
const allowedFormats = ["jpg", "jpeg"];
if (((size/1024)/1024) > 4) {
    // works perfect
    alert("Please optimize your image to maximum 4MB!");
    file.value = "";
    return false;
}
else if (!(allowedFormats.indexOf(extension) > -1)) {
    // works perfect
    alert("Please save your image in JPG format!");
    file.value = "";
    return false;
}
else if ((/[a-z0-9\s\,\.\-\_]{5,50}\.(?:jpg|jpeg)/i.test(file_name)) ==  false) {
    // this IS NOT working
    alert("Filename can have only letters (a-z), numbers, spaces, dots, '-' and '_'!");
    file.value = "";
    return false;
} else {
    // stuf to do if everything is good, rhen return true.
    return true;
}
}

Answer 5

在 @Kaiido 的反馈之后，这是我的有效解决方案，可以完成以下任务：

检查文件大小。
验证文件名。
验证文件扩展名。

JS代码较小，我用各种文件名和大小对其进行了测试。

const input = document.querySelector('#uploadFile');
input.onchange = function(e) {
if (((input.files[0].size/1024)/1024) > 4) {
	alert("Please optimize your file to maximum 4MB!");
	input.value = "";
}
else if ((/^[a-z0-9\s\,\.\-\_]{5,50}\.(?:jpg|jpeg)$/i.test(input.files[0].name)) == false) {
    //i tested for image file, but i'll use it for various extension,
    //so you can just add other extensions in this part of the regex code (?:jpg|jpeg|pdf|docx)
	alert("Filename between 5-50 characters (letters (a-z), numbers, spaces, dots, '-' and '_').");
	input.value = "";
}
};

<form>
<input type="file" id="uploadFile">
</form>

PS：永远不要忘记此验证位于前端（客户端），因此您也必须具有针对后端的验证规则。：）

干杯！

从输入字段验证onchange文件名（纯JavaScript）

5 个答案: