javascript - How to get filename using FormData object? - Stack Overflow

admin管理员组

文章数量:1278690

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
when I click submit of the form then given below javascript runs -

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);
        }

Suppose I gave f_name as 'Carl' and profile_pic as 'my_passport.png' then
OUTPUT
f_name: Carl
profile_pic: [object File]

Problem in output -
I got the value of f_name but I am not getting the value of key profile_pic instead I am getting [object File].

How to get file name using FormData object.

Help here !

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
when I click submit of the form then given below javascript runs -

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);
        }

Suppose I gave f_name as 'Carl' and profile_pic as 'my_passport.png' then
OUTPUT
f_name: Carl
profile_pic: [object File]

Problem in output -
I got the value of f_name but I am not getting the value of key profile_pic instead I am getting [object File].

How to get file name using FormData object.

Help here !

• javascript
• form-data

Share Improve this question Follow edited Jan 9, 2020 at 6:55 Abhishek kamal asked Jan 9, 2020 at 6:52 Abhishek kamalAbhishek kamal 10111 gold badge22 silver badges1010 bronze badges 4

• 2 Is that only for console? If so, don't concatenate to string but use multiple params: console.log(key , value);. This way you'll have the actual File object getting logged, and you'll be able to navigate it to get its name property. – Kaiido Commented Jan 9, 2020 at 6:55
• let me try..... – Abhishek kamal Commented Jan 9, 2020 at 6:57
• It worked.. Some times I really forget for silly mistakes #myMistake – Abhishek kamal Commented Jan 9, 2020 at 7:02
• Thanks.. So this question is over here ! – Abhishek kamal Commented Jan 9, 2020 at 7:03

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

The form contains two inputs, one of type text and the other one of type file which means that the FormData instance will have two entries, one that has a string value and the other one a File value.

To get the file's name, you can check if the current entries value if an instance of File and access its name property. Here is an example:

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

You can also get the file's name directly from the input, here is an example:

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

This second example will only work if there is only one input of type file in the entire document.

<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>

try

form_data.get('profile_pic').name

photo_details.onchange = () => {
  let form_data = new FormData(photo_details);  
  let fileName = form_data.get('profile_pic').name;
  console.log({fileName});
}

<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>

<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>

Tested and works.

本文标签： javascriptHow to get filename using FormData objectStack Overflow