上传之前,请检查本地选择的图像或视频文件的宽度和高度

时间:2019-02-23 14:05:52

标签: jquery

几天前我问了一个问题,但由于某种原因,它被标记为重复,因此我删除了该问题,然后尝试再次提出该问题。

该问题不是重复项,如果问题已被完全阅读,您将找不到重复项。对于那些认为它是重复项的人,请指向我。

我的问题。

我有一个带有按钮的表格,用于选择要上传的本地图像。允许的文件类型为“ jpg,png或swf”

如果用户选择“ jpg”或“ png”文件,脚本将检查文件的尺寸并在屏幕上回显尺寸。尺寸非常重要,并在另一个脚本中使用。

如果文件选择为“ jpg”或“ png”,下面的代码可以正常工作,但如果文件为“ .swf” Flash视频,则下面的代码可以正常工作,脚本无法对视频的实际宽度和高度进行检查。

我已经阅读了很多有关处理视频类型文件的问题,但没有给我任何有关如何在现有代码中实现这一点的想法。

var w;
var h;
$(document).ready(function() {
  $('#board').change(function() {
    console.log("Image check");
    $.get('check_image_size.php', {
    DisplayID: Form1.board.value
      },
      function(result) {
    result = JSON.parse(result);
    w = result["imagesizes"][0]["DisplayWidth"];
    h = result["imagesizes"][0]["DisplayHeight"];
    $('#size').html("Display width: " + result["imagesizes"][0]["DisplayWidth"] + ",<br/>Display height: " + result["imagesizes"][0]["DisplayHeight"]).show();
    if (result["imagesizes"][0]["DisplayType"] == 'P') {
      $("#portrait").show();
      $("#landscape").hide();
    } else {
      $("#landscape").show();
      $("#portrait").hide();
    }
      });
  });
});


window.URL = window.URL || window.webkitURL;
var elBrowse = document.getElementById("browse"),
  elPreview = document.getElementById("preview4"),
  elPreviewtext = document.getElementById("previewtext"),
  useBlob = false && window.URL;

function readImage(file) {
  var reader = new FileReader();
  reader.addEventListener("load", function() {
    var image = new Image();
    console.log("File", image);
    image.addEventListener("load", function() {
      var imageInfo = file.name;
      if (image.width != w && image.height != h) {
    console.log("w 2", w);
    $.alert({
      title: 'Image select error!',
      content: 'The image you have seleted is incorrect, ' + image.width + ' by ' + image.height + ' portrate.<br/><br/> "Please resize your image to the correct size in landscape.<br/><br/>Resizing upwards reduces the quality of the image. Start with a large image and resize downwards.',
      icon: 'fa fa-rocket',
      animation: 'zoom',
      boxWidth: '50%',
      closeAnimation: 'zoom',
      buttons: {
        okay: {
          text: 'Try again',
          btnClass: 'btn-blue'
        }
      }
    });
      } else {
    var imageInfotext = 'Display width: ' + image.width + ',<br/>Display height: ' + image.height;
    elPreview.appendChild(this);
    elPreview.insertAdjacentHTML("beforeend", imageInfo + '<br>');
    elPreviewtext.insertAdjacentHTML("beforeend", imageInfotext + '<br>');
    if (useBlob) {
      window.URL.revokeObjectURL(image.src);
    }
      }
    });
    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
  });
  reader.readAsDataURL(file);
}

elBrowse.addEventListener("change", function() {
  var files = this.files;
  // Let's create an empty `errors` String to collect eventual errors into:
  var errors = "";

  if (!files) {
    errors += "File upload not supported by your browser.";
  }

  // Check for `files` (FileList) support and if contains at least one file:
  if (files && files[0]) {
    for (var i = 0; i < files.length; i++) {
      var file = files[i];

      // Test the `file.name` for a valid image extension:
      // (pipe `|` delimit more image extensions)
      // The regex can also be expressed like: /\.(png|jpe?g|gif)$/i
      if ((/\.(png|swf|jpg)$/i).test(file.name)) {
    // SUCCESS! It's an image!
    // Send our image `file` to our `readImage` function!
    readImage(file);
      } else {

    $('#imageis').hide();
    $.alert({
      title: 'Image select error!',
      content: 'Unsupported Image extension, ' + file.name + '.<br/><br/> Supported file extensions are:.<br/><br/>.png for an image file<br/>.swf for a Adobe Flash file',
      icon: 'fa fa-rocket',
      animation: 'zoom',
      boxWidth: '50%',
      closeAnimation: 'zoom',
      buttons: {
        okay: {
          text: 'Try again',
          btnClass: 'btn-blue'
        }
      }
    });

      }
    }
  }
});

在此先感谢您的时间和帮助。

0 个答案:

没有答案