Как получить имя файла с помощью объекта FormData? - PullRequest
Новая
       9

Как получить имя файла с помощью объекта FormData?

1 голос
/ 09 января 2020

HTML

<form enctype="multipart/form-data" method="post" id='photo_details'>
    <input type="text" name="f_name">
    <input type="file" accept="image/*" name="profile_pic">
    <button class="btn">Save</button>

</form>

JAVASCRIPT
когда я нажимаю кнопку отправки формы, приведенной ниже javascript запускается - 

let form_details = document.getElementById("photo_details");
let form_data = new FormData(form_details);

// getting form values as key-value pair
        for ([key, value] of form_data.entries()) {
            console.log(key + ': ' + value);
        }

Предположим, что я дал f_name как 'Carl', а profile_pi c как 'my_passport.png', тогда
OUTPUT
f_name: Carl
profile_pi c : [объектный файл]

Проблема в выводе -
Я получил значение f_name, но я не получаю значение ключа profile_pic Вместо этого я получаю [object File].

Как получить имя файла с помощью объекта FormData.

Справка здесь!

Ответы [ 3 ]

1 голос
/ 09 января 2020 
<form enctype="multipart/form-data" method="post" id='photo_details'>
    <input type="text" name="f_name">
    <input type="file" accept="image/*" name="profile_pic">
    <button class="btn" type="button" onclick="myFunction()">Save</button>
</form>

<script type="text/javascript">
function myFunction(){
    let form_details = document.getElementById("photo_details");
    let form_data = new FormData(form_details);
     for ([key, value] of form_data.entries()) {
        console.log(value);
    }
}
</script>

Проверено и работает.

0 голосов
/ 09 января 2020 
<form enctype="multipart/form-data" onsubmit="return getData()" method="post" id='photo_details'>
    <input type="text" name="f_name">
    <input type="file" accept="image/*" name="profile_pic" id="file">
    <input type="submit">
</form>

<script type="text/javascript">
    function getData() {
        let file_path = document.getElementById('file').value;
        let file_name = file_path.split(/(\\|\/)/g).pop();
        console.log(file_name);
        return false;
    }
</script>
0 голосов
/ 09 января 2020

Форма содержит два ввода, один из которых типа text, а другой - типа file, что означает, что экземпляр FormData будет содержать две записи: один со значением string, а другой - a File value.

Чтобы получить имя файла, вы можете проверить, имеет ли значение текущие записи экземпляр File и получить доступ к его свойству name. Вот пример: 

for ([key, value] of form_data.entries()) {
  let val;
  if (value instanceof File) {
    val = value.name;
  } else {
    val = value;
  }
  console.log(key + ': ' + val);
}

Вы также можете получить имя файла непосредственно из ввода, вот пример: 

const fileInput = document.querySelector('input[type=file]');
const path = fileInput.value;
const fileName = path.split(/(\\|\/)/g).pop();
console.log('File name:', fileName);

Этот второй пример будет работать, только если есть только один ввод файла типа во всем документе.

...