使用 javascript 验证图像类型

Question

我有一个这样的表格：

<form method=post src=upload enctype="multipart/form-data">
    <input name="img1" id="img1" type="file">
    <input type="submit" value="Upload">
</form >

请问如何使用 javascript 验证此表单，以便仅上传 jpg 文件。感谢阅读。

Answer 1

Google 搜索发现：http://www.webdeveloper.com/forum/archive/index.php/t-104406.html

对于您的应用程序，我建议通过以下方式运行输入：

function valid(a){
    return a.indexOf(".jpg") != -1 && a.type == file;
}

应该可以的。

Answer 2

您可以在输入标签中使用“accept”参数：

<input name="img1" id="img1" type="file" accept="image" />

它不是 JavaScript，但仍有助于防止用户尝试上传非图像文件。

Answer 3

71944 有一些 javascript，看起来可以满足您的需求。请记住，这只是客户端验证，因此您仍需要在服务器上进行验证。

Answer 4

您可以绑定表单的onsubmit事件，并检查您的文件输入的value是否以“.jpg”或“.jpeg”结尾，如下所示：

window.onload = function () {
  var form = document.getElementById('uploadForm'),
      imageInput = document.getElementById('img1');

  form.onsubmit = function () {
    var isValid = /\.jpe?g$/i.test(imageInput.value);
    if (!isValid) {
      alert('Only jpg files allowed!');
    }

    return isValid;
  };
};

查看上面的例子here。

Answer 5

表格：-

<form method=post src=upload enctype="multipart/form-data" onsubmit="return validateFile()">
<input name="img1" id="img1" type="file">
<input type="submit" value="Upload">
</form>

Javascript 代码：-

        function validateFile() 
        {
            var allowedExtension = ['jpeg', 'jpg'];
            var fileExtension = document.getElementById('img1').value.split('.').pop().toLowerCase();
            var isValidFile = false;

                for(var index in allowedExtension) {

                    if(fileExtension === allowedExtension[index]) {
                        isValidFile = true; 
                        break;
                    }
                }

                if(!isValidFile) {
                    alert('Allowed Extensions are : *.' + allowedExtension.join(', *.'));
                }

                return isValidFile;
        }

如果您想添加更多图片扩展，请添加 allowedExtension 数组；

var allowedExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];

Answer 6

<script>
var fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change",function(event){
    document.getElementById("name").innerHTML = "NAME: " + event.target.files[0].name;
    document.getElementById("type").innerHTML = "TYPE: " + event.target.files[0].type;
    document.getElementById("size").innerHTML = "SIZE: " + event.target.files[0].size;
});
</script>

<input type="file" id="fileInput" name="file"/>

Answer 7

这是验证图像的一种更简单、更可靠的方法，您无需考虑所有可能的图像扩展。

document.body.querySelector('input[type="file"]')
        .addEventListener('change', function () {
            if (this.files[0] && this.files[0].type.includes('image')) {
                console.log('file is an image');
            } else {
                console.log('file is not an image');
            }
        });

如果你想要严格的 jpg

document.body.querySelector('input[type="file"]')
        .addEventListener('change', function () {
            if (this.files[0] && this.files[0].type === 'image/jpeg') {
                console.log('file is jpg');
            } else {
                console.log('file is not jpg');
            }
        });

Answer 8

图片扩展数组

let allowedExtension = ['image/jpeg', 'image/jpg', 'image/png','image/gif','image/bmp'];

获取图片类型

//----<input type="file" id='userimage' accept="image/*" name='userimage'>-----

let type = document.getElementById('userimage').files[0].type;

检查类型已包含在允许的扩展数组中:)

if(allowedExtension.indexOf(type)>-1)
 {
      alert('ok')
 }else{
      alert('Not a image')
      }
 }