Question

我在这里编码

                list($width, $height, $type, $attr) = getimagesize($destinationPath . $im . '.png');
                    $white = imagecolorallocate($im, 255, 255, 255);
                    imagerectangle($im, $result['FaceDetails']['0']['BoundingBox']['Top'] * $width, $result['FaceDetails']['0']['BoundingBox']['Left'] * $height, $result['FaceDetails']['0']['BoundingBox']['Height'] * $width, $result['FaceDetails']['0']['BoundingBox']['Width'] * $height, $white);
                    imagepng($im, $destinationPath . $im . '.png', 9);

点击“添加更多”按钮后，我将插入一个新的输入字段以上传新文件。在这里，我将验证所有文件的大小和尺寸，并且我的js在下面

<table style="width:100%" border="1">

                             <thead><tr><td colspan="2"> <input class="form-control ImageClass" placeholder="" name="imageurl[]" accept="image/*" id="imagedurl" type="file" onchange="ImageValidation()"   value=""></td></tr></thead>
                             <tbody id="MultiImg"></tbody>
                             <tfoot><tr><td style="text-align:right" colspan="2"> <input type="button"  onclick="Addrow()" name="buttonSubmit" value="Add More" class="btn btn-success" /></td></tr></tfoot>

                              </table>

下面是我的用于生成输入字段的代码

  $("#imageurl").change(function(){
  //    alert(this.files[0].size);
   var FileSize = this.files[0].size/ 1024 / 1024; // in MB
   //alert(FileSize);
      if (FileSize > 1) {
          alert('File size exceeds 1 MB');
          document.getElementById("imageurl").value="";
          return false
         // $(file).val(''); //for clearing with Jquery
      } 
      // alert(this.width + " " + this.height);
  readURL(this);
    }); 

    var _URL = window.URL || window.webkitURL;
    $("#imageurl").change(function (e) {
  var file, img;
  if ((file = this.files[0])) {
      img = new Image();
      img.onload = function () {
          wth=this.width;
          hit=this.height;
          if(wth > 1200 || hit>600){
              alert('File Dimension Should Not Exceed 1200X600');
              document.getElementById("imageurl").value="";

              $('#imgdiv').attr('src', '');

              return false;

          }
      };
      img.src = _URL.createObjectURL(file);
  }
    });

我已经针对javascript中的多个图像完成了此操作，但这不起作用

 function Addrow(){
  var table = document.getElementById("MultiImg");
 var x = document.getElementById("MultiImg").rows.length;
 var row = table.insertRow(x);
 var cell1 = row.insertCell(0);
 cell1.innerHTML = '<input class="form-control ImageClass" placeholder="" name="imageurl[]" id="imagedurl" accept="image/*"  type="file"   value="">';
 var cell2 = row.insertCell(1);
 cell2.innerHTML = '<input type="button" value="Delete" class="btn btn-success" onclick="deleteRow(this)"/>';
                              }

Answer 1

您的代码：

wth=this.width;

应该更改为：

wth=img.width; \\do the same for height to

由于this对象无权访问img属性

在不知道实际错误的情况下，这是我看到的第一件事，可能会导致一些问题

如何验证多个图像文件的大小和尺寸

1 个答案: