javascript 中的文件名验证上传

Question

我想限制用户上传包含字母、特殊字符和space的文件名。

我只想允许数字 0、1、2、3、4、5、6、7、8、9，最多 11 个数字。

示例：54874563101.png

javascript中的上传按钮解决方案将是完美的

有人可以帮忙吗？谢谢

<button type="button" onclick="upload()" value="upload"  id="buttonUpload">Upload</button>

Answer 1

您可以检查文件名长度，然后使用正则表达式确保名称中只提供数字。

$("#file").on("change", function() {
    const rawFileName = $("#file").val().split('\').pop().split(".");
    const fileName = rawFileName[0];
    const fileExtension = rawFileName[1];

    // Validate file extension.
    if (fileExtension !== "png") {
        alert("Only .png files are allowed!");
        return;
    }

    // Validate file name.
    if (fileName.length > 11) {
        alert("File name must be 11 or less characters!");
        return;
    }

    if (!(/^\d+$/.test(fileName))) {
        alert("Only digits are allowed in the file name!");
        return;
    }

    // Validate file size.
    const fileSize = $("#file")[0].files[0].size;

    if ((fileSize < 40000) || (fileSize > 100000)) {
        alert("File size must be between 40kb and 100kb!");
        return;
    }

    // Validated.
    alert("File name valid!");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
    <input type="file" id="file" accept="image/png" />
    <button type="submit">Submit</button>
</form>

正在验证文件名

要使用jQuery获取文件名，我们可以使用：

const fileName = $("#file").val();

但是这会输出一个填充相对路径和文件扩展名，因此我们可以进一步分离文件名和扩展名。

const rawFileName = $("#file").val().split('\').pop().split(".");
const fileName = rawFileName[0];
const fileExtension = rawFileName[1];

然后我们可以使用正则表达式 /^\d+$/:

匹配文件名以确定它只包含数字

^ 开始时的资产位置
\d 匹配 [0-9]
+匹配前一个token直到字符串结束
$资产位置到最后

正在验证文件大小

获取jQuery中文件的大小：

const fileSize = $("#file")[0].files[0].size;

此 returns 一个 int 值包含上传的第一个文件的字节大小。 (此形式只允许单文件上传所以保存在files[0]下)

if ((fileSize < 40000) || (fileSize > 100000))

40000字节等于40kb，100000字节等于100kb。

文件上传扩展名限制

要限制文件上传器只接受特定的文件扩展名，可以将 accept 属性添加到 input 元素。

<input type="file" id="file" accept="image/png" />

image/png 值只允许带有 .png 扩展名的文件，有关详细信息，请参阅 unique file type specifiers。

javascript 中的文件名验证上传

Filename validation upload in javascript

javascript

regex

validation

upload

button

正在验证文件名

正在验证文件大小

文件上传扩展名限制