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

您可以绑定表单的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 2

表格： -

<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 3

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

DATEADD(DAY, DATEDIFF(DAY, 0, <mydate>), 0)

如果您要严格使用jpg

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');
            }
        });

Answer 4

您可以对输入标记使用“accept”参数：

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

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

Answer 5

图像扩展数组

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')
      }
 }

Answer 6

Google搜索出土了这个：http://www.webdeveloper.com/forum/archive/index.php/t-104406.html

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

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

这应该有效。

Answer 7

71944有一些javascript看起来可能会做你需要的。请记住，它只是客户端验证，因此您仍然希望在服务器上验证它。

Answer 8

＆＃13;

<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>

＆＃13;

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

＆＃13;

使用javascript验证图像类型

8 个答案: