如何确保文件输入是视频而不是Ajax中的其他内容

Question

我要确保用户上传的是视频而不是ajax我在后台使用django验证了这一步我还想让FileInput是视频而不是其他，如果这个文件不是视频则显示错误警报，这个javascript包括上传带有进度条的文件

my javascript code

const file_input_label = document.getElementById('file_input_label')
function input_filename(){
file_input_label.innerHTML = input.files[0].name;
}

const uploadForm = document.getElementById('upload-form')
const input = document.getElementById('formGroupExampleInput2')
console.log(input)
const alertBox = document.getElementById('alert-box')
const imageBox = document.getElementById('image-box')
const progressBox = document.getElementById('progress-box')
const canceleBox = document.getElementById('cancel-box')
const canceleBtn = document.getElementById('cancel-btn')

const csrf = document.getElementsByName('csrfmiddlewaretoken')
// whenever choose th file something happen
input.addEventListener('change', ()=>{
progressBox.classList.remove('d-none')
canceleBox.classList.remove('d-none')
const img_data = input.files[0]
const url = URL.createObjectURL(img_data)
console.log(img_data)
const fd = new FormData()
fd.append('csrfmiddlewaretoken', csrf[0].value)
fd.append('video', img_data)
$.ajax({
type: 'POST',
url: uploadForm.action,
enctype: 'multipart/form-data',
data: fd,
beforeSend: function() {
console.log('before')
alertBox.innerHTML = ""
// imageBox.innerHTML = ""
},
xhr: function() {
const xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', e=>{
// console.log(e)
if (e.lengthComputable){
const percent = e.loaded / e.total * 100
console.log(percent);
progressBox.innerHTML =
`<div class="progress">
<div class="progress-bar" role="progressbar" style="width: ${percent}%" aria-valuenow=" ${percent}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>${percent.toFixed(1)}%</p>`
}
})
canceleBtn.addEventListener('click', ()=>{
xhr.abort()
setTimeout(()=>{
uploadForm.reset()
progressBox.innerHTML = ""
alertBox.innerHTML = ""
canceleBox.classList.add('d-none')
}, 1000)
})
return xhr
},
success: function(response) {
console.log(response)
// imageBox.innerHTML = `<img src="${url}" width="300px">`
// imageBox.innerHTML = `<video class="card" controls src="${url}">`
alertBox.innerHTML = `<div class="alert alert-success" role="alert">Successfully uploaded your video. click upload to upload your video</div>`
},
error: function(error){
console.log(error)
alertBox.innerHTML = `<div class="alert alert-danger" role="alert">Ups something went wrong!</div>`
},
cache: false,
contentType: false,
processData: false,
})
})

Answer 1

input.addEventListener('change', () => { 
var filePath = input.value; 

// Allowing file type 
var allowedTypes =  
/(.mp4|.mkv|.avi|.flv)$/i; 

if (!allowedTypes.exec(filePath)) { 
alert('Invalid file type'); 
input.value = ''; 
return false; 
}
})