0

如果选择的 img 文件大小不合适，我必须在警报后清除图像字段。但是现在我可以看到警报..但是当我单击“确定”（在警报内）时，图像仍然保留在那里，我可以继续提交表单。但我实际上想在图像分辨率不满足条件时限制这一点。请查看我的代码并提供帮助。

这是我的 onFileselect() 函数

 onFileSelect(fileInput: any,type:any) {
  this.selectedFile = <File>fileInput.target.files[0];
  this.preview(type);  
  this.uploadImage();} #this function will send the file to Apostrophe(CMS backend) and obtain an attachment object.

预览功能：

preview(type) {
// Show preview 
var mimeType = this.selectedFile.type;
if (mimeType.match(/image\/*/) == null) {
  return;
}

var reader = new FileReader();  
const img = new Image();
img.src = window.URL.createObjectURL(this.selectedFile); 
reader.readAsDataURL(this.selectedFile);  
img.onload = (_event) => { 
  const width = img.naturalWidth;
  const height = img.naturalHeight;
  console.log("width = " + width + " height = "+ height)
  switch (type) {
    case "banner":
      this.checkImageResolution(reader, width, height, 1000,562);
      break;
    case "award":
      this.checkImageResolution(reader, width, height, 1000, 1142);
      break;
    case "code":
      this.checkImageResolution(reader, width, height, 1620, 1080);
      break;
    case "video":
      this.checkImageResolution(reader, width, height, 1200, 675);
      break;
    case "post":
      this.checkImageResolution(reader, width, height, 1620, 1080);
      break;  
    case "news":
      this.checkImageResolution(reader, width, height, 1200, 675);
      break;  
    default:
      break;
  }
};}

分辨率检查功能：

checkImageResolution(reader: any, width: number, height: number, conditionWidth: number, conditionHeight: number) {
if (width !== conditionWidth && height !== conditionHeight) {
  
  this.selectedFile = null; **#Actually is keeps the file null..but still i can see the file in the image field**
  alert("Image should be of " + conditionWidth + " x " + conditionHeight + " size");
  this.previewUrl = null;
 
} else {
  this.previewUrl = reader.result;
 
}

}

4

0 回答 0