javascript - 如果输入类型文件不是图像，则显示警报，使用 jquery 脚本

Question

我正在使用输入类型文件，如果选择了图像，它将显示预览，如果不是选择图像(pdf/docx)我想显示警报无效，但出现错误:无法读取未定义的属性“拆分”

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<input type='file' id='input1'>
<div class="hide_this" style="display:none;">    <img id='imagepreview1' width="100" height="100" >
<button type="button" class="close" aria-label="Close" style="position: absolute;top:30px;opacity:1.2;">
  <span aria-hidden="true" style="color:black;">&times;</span>
</button>
</div>


<script>
$("#input1").change(function() {
    readURL(this);
    $('#imagepreview1').show();
    $('.hide_this').css({
        'display': 'block'
    });
});
$('.close').click(function() {
    $(".hide_this").hide();
    document.getElementById("input1").value = "";
    $("#imagepreview1").hide();
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var ext = input.files[0].split('.').pop().toLowerCase();
            if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
                alert('invalid extension!');
            }
            $('#imagepreview1').prop('src', e.target.result).show();
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>

Answer 1

作为对我的评论和您的请求的回应，除了未定义的错误。您可以通过创建一个名为:jpg.exe.

的文件来绕过安全检查

使用正则表达式，并确保您的文件确实被选中。使用 onselect 事件。

let good = 'test.jpg';
let bad = 'jpg.test';
let re = (/\.(gif|jpg|jpeg|tiff|png)$/i).test(good);
if (re) {
    console.log('Good', good);
}

console.log('Bad:', bad);

并确保对此进行更改

let ext = $("#input1").val().split(".").pop().toLowerCase();

对于 PDF，您可以在计算表达式后使用库。

var url = 'https://s1.q4cdn.com/806093406/files/doc_downloads/test.pdf';


let re = (/\.(pdf)$/i).test(url);
if (re) {
  console.log(re);
  //
  // Asynchronous download PDF
  //
  var loadingTask = pdfjsLib.getDocument(url);
  loadingTask.promise.then(function(pdf) {
    //
    // Fetch the first page
    //
    pdf.getPage(1).then(function(page) {
      var scale = 1.5;
      var viewport = page.getViewport({
        scale: scale,
      });
      //
      // Prepare canvas using PDF page dimensions
      //
      var canvas = document.getElementById('the-canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      //
      // Render PDF page into canvas context
      //
      var renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      page.render(renderContext);
    });
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
<canvas id="the-canvas" style="border:1px  solid black"></canvas>