如果文件不是图像，则在加载时显示甜蜜警报

Question

有人可以帮我吗？我尝试了几次，但失败了。如果输入文件不是图像，如何在文件选择上显示甜美警报？

<input type ="file" />

Answer 1

正在运行演示：https://jsfiddle.net/usmanmunir/d7vpbet6/6/

您可以使用jQuery查看所选文件是否为图像类型。

jQuery

function uploadImage(_this) {
  var file = _this.files[0];
  var fileType = file["type"];
  var validImageTypes = ["image/gif", "image/jpeg", "image/png"];
  if ($.inArray(fileType, validImageTypes) < 0) {
       alert('Please select an image! Fill is not an image')
       _this.form.reset()
  } else {
    alert('All good')
     //do something
  }
}

如果您不想使用jQuery。您也可以通过Javascript执行此操作。

JavaScript

function uploadImage(_this) {
  const file = _this.files[0];
  const  fileType = file['type'];
  const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
  if (!validImageTypes.includes(fileType)) {
     alert('Please select an image! Fill is not an image')
     document.getElementById("uploading_images").reset();
  } else {
    alert('All good')
  }
}

HTML

<form id="uploading_images">
 <input type="file" id="upload_image" onChange="uploadImage(this)" />
</form>

希望这会有所帮助。