У меня есть код, который успешно определяет тип файла (при загрузке пользователем), если эта функция была разделена на три отдельные функции (одна для 2 для фотографий и 1 для загрузки видео). В моих тегах <input/>
у меня есть onchange="fileValidation()"
на каждом соответствующем входе. Я пытаюсь объединить это в одну функцию, чтобы она выполняла вышеупомянутую успешную функциональность, когда она была разделена на три функции.
Я использую ванильный JS. Все на одной странице. Я предполагаю, что это просто не будет работать правильно, если три отдельных входных тега имеют одну и ту же функцию fileValidation()
. Другими словами, если кто-то хочет загрузить видео, два других тега <input/>
могут запутаться... но я могу ошибаться?
Как я могу объединить все эти if()
внутри одной функции, чтобы я мог снова заставить ее работать так, как если бы она была разделена на три функции? Код ниже для справки.
function fileValidation() {
const realFileBtn = document.getElementById("real-file");
const realFileW9 = document.getElementById("real-file-w9");
const realFileVideo = document.getElementById("real-file-video");
let filePathWinnerPhoto = realFileBtn.value;
let filePathW9 = realFileW9.value;
let filePathVideo = realFileVideo.value;
// Allowing file type
let allowedExtensionsWinnerPhoto = /(\.jpg|\.png|\.HEIC|\.JPEG|\.pdf)$/i;
let allowedExtensionsW9 = /(\.jpg|\.png|\.HEIC|\.JPEG|\.pdf)$/i;
let allowedExtensionsVideo = /(\.mp4|\.mov)$/i;
if (!allowedExtensionsWinnerPhoto.exec(filePathWinnerPhoto)) {
alert('Invalid file type');
realFileBtn.value = '';
return false;
} else {
console.log("file accepted");
fileAcceptedFlag = true;
}
if (!allowedExtensionsW9.exec(filePathW9)) {
alert('Invalid file type');
realFileW9.value = '';
return false;
} else {
console.log("file accepted");
fileAcceptedW9Flag = true;
}
if (!allowedExtensionsVideo.exec(filePathVideo)) {
alert('Invalid file type');
realFileVideo.value = '';
return false;
} else {
console.log("file accepted");
fileAcceptedVideoFlag = true;
}
return fileAcceptedFlag || fileAcceptedW9Flag || fileAcceptedVideoFlag;
1 ответ
Приведенные ниже обновления включают переменную ошибок для хранения ошибок и возврата только один раз в конце и оповещения об ошибках, если они существуют. Для тестирования я ввел значения для имен файлов и закомментировал сброс входных значений.
function fileValidation() {
const realFileBtn = document.getElementById("real-file");
const realFileW9 = document.getElementById("real-file-w9");
const realFileVideo = document.getElementById("real-file-video");
let filePathWinnerPhoto = "test.jp1g";
let filePathW9 = "test.jpxg";
let filePathVideo = "test.mov";
let imgreg = /(\.jpg|\.png|\.HEIC|\.JPEG|\.pdf)$/i;
let videoreg = /(\.mp4|\.mov)$/i;
let errors = [];
if(!imgreg.exec(filePathWinnerPhoto)){
errors.push("Winner Photo is not valid");
//realFileBtn.value = "";
}
if(!imgreg.exec(filePathW9)){
errors.push("W9 Photo is not valid");
//realFileW9.value = "";
}
if(!videoreg.exec(filePathVideo)){
errors.push("Video is not valid");
//realFileVideo.value = "";
}
if(errors.length > 0){
alert(errors.join("\n"));
}
return (errors.length == 0);
}
fileValidation();
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Имейте в виду, что JavaScript — это НЕ то же самое, что Java! Включите все ярлыки, относящиеся к вашему вопросу; например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [svelte] и т. д.