У меня есть код, который успешно определяет тип файла (при загрузке пользователем), если эта функция была разделена на три отдельные функции (одна для 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;
0
testman 21 Апр 2020 в 00:43
На самом деле нет смысла перемещать все три разных кода в одну и ту же функцию.
 – 
Bergi
21 Апр 2020 в 12:34

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();
0
imvain2 21 Апр 2020 в 01:02