show alert if input type file is not image ,using jquery script

Question

I am working with input type file, if image selected it will show preview if other than image selected (pdf/docx)I want to show alert invalid,but getting error :Cannot read property 'split' of undefined

<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

您正在尝试使用不存在的my_file_field ID 读取输入的值 - 请改用input1 ：

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

Answer 2

In response to my comment and your request, besides the undefined error. You could beat your security check by just making a file named: jpg.exe.

Use a regex expression, and make sure your file is actually selected. Use the onselect event.

 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);

And make sure change to this

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

For a PDF, you could use a library after evaluating the expression.

 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>

Answer 3

You file input is #input1 not #my_file_field

change

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();

to

var ext = $('#input1').val().split('.').pop().toLowerCase();