Question

我正在尝试上传图片并检查这是否是带有Javascript功能的有效图片。

＆＃13;

function validateImage() {
  var formData = new FormData();

  var file = document.getElementById("img").files[0];

  formData.append("Filedata", file);
  var t = file.type.split('/').pop().toLowerCase();
  if (t != "jpeg" && t != "jpg" && t != "png" && t != "bmp" && t != "gif") {
    alert('Please select a valid image file');
    document.getElementById("img").value = '';
    return false;
  }
  if (file.size > 1024000) {
    alert('Max Upload size is 1MB only');
    document.getElementById("img").value = '';
    return false;
  }
  return true;
}

＆＃13;

<form action="/upload" method="post" enctype="multipart/form-data">
  Image<input type="file" name="upl" accept="image/*" onchange="validateImage()"><br>
  <input type="submit" value="Submit">
</form>

＆＃13;

未调用函数validateImage（）并显示下一条消息：

未捕获的ReferenceError：未定义validateImage 在HTMLInputElement.onchange

有什么想法吗？

Answer 1

您没有id="img"的元素。添加id或选择其他方法来选择JS代码中的文件输入。

＆＃13;

function validateImage() {
  console.log("validateImage called");
  var formData = new FormData();

  var file = document.getElementById("img").files[0];

  formData.append("Filedata", file);
  var t = file.type.split('/').pop().toLowerCase();
  if (t != "jpeg" && t != "jpg" && t != "png" && t != "bmp" && t != "gif") {
    alert('Please select a valid image file');
    document.getElementById("img").value = '';
    return false;
  }
  if (file.size > 1024000) {
    alert('Max Upload size is 1MB only');
    document.getElementById("img").value = '';
    return false;
  }
  return true;
}

＆＃13;

<form action="/upload" method="post" enctype="multipart/form-data">
  Image<input id="img" type="file" name="upl" accept="image/*" onchange="validateImage()"><br>
  <input type="submit" value="Submit">
</form>

＆＃13;

未捕获的ReferenceError：未定义onchange函数

1 个答案: