javascript - 错误 css 类未应用于自定义文件输入标记，并且在不支持的格式图像上传的情况下未发生 jquery 验证计数

Question

首先，很抱歉标题太长。目前正在处理自定义文件输入，使用我当前的代码，我可以上传唯一的 jpeg 文件，如果用户上传其他格式，它将显示错误消息，您必须只上传 jpg

当用户单击下一个按钮时，jquery 应该验证文件输入，并且应该在消息中说您错过了一个字段 目前我为输入字段提供了必需的内容，但它仍然没有验证该字段。我很挣扎，脑子里没有任何东西可以帮助我。

这是jquery代码

  function showImage() {
        var files = !! this.files ? this.files : [];
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg)$/;
        // No file selected, or no FileReader support
        if (!files.length || !window.FileReader) return;

        // If the file is a JPEG image
        if (regex.test(files[0].type)) {
            // Create an instance of FileReader
            var reader = new FileReader();
            // Declare the onload callback before reading the file
            reader.onload = function () {
                // Set image data as background of div
                $preview.css("background-image", "url(" + this.result + ")");
                // Empty the error message
                $errorLabel.text('');

                // Disable file selection
                $fileInput.prop('disabled', true);
                // Show the buttons
                $deleteBtn.show();
                $sendBtn.show();
                $imagecontainer.hide();
            };
            // Read the local file
            reader.readAsDataURL(files[0]);
        } else {
            // Add an error message
            $errorLabel.text('Please upload only jpeg');
            $errorLabel.css("color","red");
            $fileInput.addClass('errRed');
        }
    }

这是fiddle link

请指导我

提前致谢

html代码

<input name="Select File upload" accept="image/jpeg" required class="upload" id="upload" type="file" />

现在我给出了新的属性调用接受输入文件用户只能上传 jpeg 图像，这是正确发生的，但我的验证计数并没有因此减少:(

Answer 1

您的正则表达式不会针对 type 属性进行验证，因为它返回 MIME type文件的名称，并且您的正则表达式正在查看文件扩展名。使用name如果您想继续使用该正则表达式，则改为使用属性。

换句话说，尝试改变

regex.test(files[0].type)

至

regex.test(files[0].name)