Kiểm tra phần mở rộng tệp và người dùng cảnh báo nếu không phải là tệp hình ảnh

Question

Tôi cần trợ giúp thêm một số dòng mã để kiểm tra là tệp là hình ảnh, để kiểm tra tiện ích mở rộng. Đây là mã của tôi mà tôi sử dụng để biểu thị tiến trình tải lên hình ảnh. Tôi làm điều đó trong php và người dùng không thể tải lên bất kỳ tệp nào ngoại trừ .jpg .jpeg .gif và .png nhưng anh ta không nhận được thông báo rằng tệp không được tải lên. Khi tôi thêm mã javascript để tải lên tiến trình, thông điệp php của tôi mà tôi tạo không hiển thị nữa.

Đây là javascript upload.js mã tập tin của tôi:

var handleUpload = function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 

    var fileInput = document.getElementById('image_id'); 

    var data = new FormData(); 

    data.append('javascript', true); 

     if(fileInput.files[0].size > 1050000) { 
     document.getElementById("image_id").innerHTML = "Image too big (max 1Mb)"; 
     alert('Fotografija koju želite dodati je veća od 1Mb!'); 
     window.location="upload_images.php" 
     return false; 
     } 

    for (var i =0; i < fileInput.files.length; ++i) { 
     data.append('image', fileInput.files[i]); 
    } 

    var request = new XMLHttpRequest(); 

    request.upload.addEventListener('progress', function(event) { 
     if (event.lengthComputable) { 
      var percent = event.loaded/event.total; 
      var progress = document.getElementById('upload_progress'); 

      while (progress.hasChildNodes()) { 
       progress.removeChild(progress.firstChild); 
      } 

      progress.appendChild(document.createTextNode(Math.round(percent * 100) + ' %')); 
     } 
    }); 

    request.upload.addEventListener('load', function(event) { 
     document.getElementById('upload_progress').style.display = 'none'; 
    }); 

    request.upload.addEventListener('error', function(event) { 
     alert('Dodavanje slika nije bilo uspješno! Pokušajte ponovo.'); 
    }); 

    request.addEventListener('readystatechange', function(event) { 

     if (this.readyState == 4) { 
      if(this.status == 200) { 
       var links = document.getElementById('uploaded'); 

       window.location="upload_images.php?success" 
       console.log(this.response); 
      } else { 
       console.log('Server replied with HTTP status ' + this.status); 
      } 
     } 

    }); 

    request.open('POST', 'upload_images.php'); 
    request.setRequestHeader('Cache-Control', 'no-cache'); 

    document.getElementById('upload_progress').style.display = 'block'; 

    request.send(data); 
} 

window.addEventListener('load', function(event) { 
    var submit = document.getElementById('submit'); 
    submit.addEventListener('click', handleUpload); 

}); 

Và đây là hình thức của tôi cho tập tin tải lên:

<div id="uploaded"> 

</div> 
<div> 
<form action="" method="post" enctype="multipart/form-data"> 
<input name="image" id="image_id" type="file" size="25" value="Odaberi sliku" /> 
<input type="submit" id="submit" value="Dodaj Foto"/> 
</form> 
</div> 
<div class="upload_progress" id="upload_progress"></div> 

tôi cần ở chỗ mã javascript cũng để kiểm tra được tập tin là hình ảnh. Để cho phép mở rộng jpg, jpeg, png và gif và chặn các tiện ích mở rộng khác. Để cảnh báo người dùng nếu anh ấy cố gắng tải lên loại tệp khác.

Answer 1

if (!fileInput.files[0].name.match(/.(jpg|jpeg|png|gif)$/i)) 
    alert('not an image'); 

Answer 2

phong cách bạn cung cấp cho lớp tên-jsp

"Choose file",input:true,icon:true,classButton:"btn",classInput:"input-large name-jsp" 

tại jsp hoặc html bạn cung cấp cho id = "cekJpg" (ở tập tin tải lên nhấp chuột không chọn tập tin)

<input id="cekJpg" type="submit" class="btn btn-primary" value="Upload image"> 

tại javascript

//if click button upload image with id="cekJpg" 
$("#cekJpg").on('click', function (e) { 
    //get your format file 
    var nameImage = $(".name-jsp").val(); 
    //cek format name with jpg or jpeg 
    if(nameImage.match(/jpg.*/)||nameImage.match(/jpeg.*/)){ 
     //if format is same run form 
    }else{ 
     //if with e.preventDefault not run form 
     e.preventDefault(); 
     //give alert format file is wrong 
     window.alert("file format is not appropriate"); 
    } 
});