使用jQuery实现文件选择非图片弹窗提示及解决split未定义报错

Got it, let's break down what's going wrong here and fix it up:

The Root Cause #

That error pops up because you're trying to call split() on a File object (input.files[0]), not the filename string. File objects don't have a split method—you need to access the name property of the File to get the actual filename, then split that to grab the extension.

Step-by-Step Fixes #

1. Correct Extension Extraction #

Replace this line:

var ext = input.files[0].split('.').pop().toLowerCase();

With:

var ext = input.files[0].name.split('.').pop().toLowerCase();

2. Fix Validation Logic #

Right now, even if the extension is invalid, you're still setting the preview image's src—that's not ideal. We need to:

• Show the error alert
• Reset the file input
• Hide the preview container
• Stop the preview image from loading

3. Clean Up Edge Cases #

Make sure the preview doesn't show up when we have an invalid file, and that the close button properly resets everything.

Full Corrected Code #

<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; position: relative;">
  <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);
});

$('.close').click(function() {
  $(".hide_this").hide();
  document.getElementById("input1").value = "";
  $("#imagepreview1").hide().attr('src', ''); // Clear src to avoid old preview
});

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    var file = input.files[0];
    var ext = file.name.split('.').pop().toLowerCase();
    
    // Validate file type first
    if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) === -1) {
      alert('invalid extension!');
      // Reset everything
      input.value = "";
      $(".hide_this").hide();
      $("#imagepreview1").hide().attr('src', '');
      return; // Exit early so we don't load the file
    }

    reader.onload = function(e) {
      $('#imagepreview1').prop('src', e.target.result).show();
      $('.hide_this').css({ 'display': 'block' });
    }
    reader.readAsDataURL(file);
  }
}
</script>

Key Changes Explained #

• Moved the preview container/show logic inside the valid file check—so it only shows when we have a valid image
• Added code to clear the preview image's src when closing or resetting, so old previews don't stick around
• Exited early from the readURL function if the file is invalid, preventing unnecessary FileReader operations
• Fixed the split() call to target the file's name property instead of the File object itself

内容的提问来源于stack exchange，提问作者Anonymous