JavaScript图像验证

时间:2019-03-15 21:07:30

标签: javascript html

我正在创建Java脚本图像验证脚本,该脚本不起作用

这是我的JavaScript代码

 if(document.getElementById("img-id").value == ""){
    alert("Select an image");
    return false;
}

html表单

    <input name="file[]"class="img-id" 
type="file"   
onchange="document.getElementById('src-
img').src = window.URL.createObjectURL(this.files[0])">

1 个答案:

答案 0 :(得分:0)

您的问题似乎未包含复制问题所需的所有代码。您引用ID为src-img的元素,但问题的HTML中未显示任何类似内容。我已经将该元素添加到页面中,并将内联onchange处理程序更改为JavaScript EventListener(这在JavaScript中通常被认为是一种好习惯)。我还向input标签添加了“ accept”属性,以帮助防止选择非图像文件。

HTML

<input name="file[]" class="img-id" type="file" accept="image/*"/>
<img id="src-img"/>

JavaScript

window.addEventListener("change", function(e){
    if (e.target.matches(".img-id")){
    document.getElementById('src-img').src = window.URL.createObjectURL(e.target.files[0]);
  }
});

您可以在this JSFiddle中看到它的工作。