Блог

Главная - Вопросы по программированию - Отображение выбранного документа из типа ввода: файл

Отображение выбранного документа из типа ввода: файл

#javascript #html

Вопрос:

У меня есть этот код

HTML

 <input type="file" accept=".docx" type="file" id="fileUpload" onchange="setFile()" />

Язык JavaScript

const setFile = () => { console.log(document.getElementById('fileUpload').files[0])}

И я пытаюсь заставить выбранный файл отображаться в консоли, но безрезультатно. Пожалуйста, как я могу это исправить?

Вот ссылка на песочницу https://codesandbox.io/embed/fancy-river-9dn69?codemirror=1

Комментарии:

1. что вы хотите, чтобы было отображено? это из-за названия?

2. Имя файла и другие его свойства

3. Ваш код отображает информацию на консоли.

4. @Gass он не отображается

Ответ №1:

Просто укажите свойство name, и вы получите то, что ищете.

 const setFile = () => { 
    console.log(document.getElementById('fileUpload').files[0].name)
} 
 <input type="file" accept=".docx" type="file" id="fileUpload" onchange="setFile()" />

Другие свойства, такие как LastModified, LastModifiedDate, тип и другие, также доступны на нем, поэтому просто обратитесь к тем, которые вы хотите отобразить.

Комментарии:

1. К сожалению, я получаю тот же результат. В консоли ничего не отображается

Ответ №2:

«SetFile ()» рассматривается как строка ,а не вызов функции , поэтому для вызова SetFile () вам нужно вызвать его , поэтому используйте onChange={setFile()} , если вы работаете в react

 const setFile = () => { 
    console.log(document.getElementById('fileUpload').files[0].name)
}
 
 <input type="file" accept=".docx" type="file" id="fileUpload" onchange={setFile()} />

Комментарии:

1. Это просто html и javascript

Ответ №3:

Ваш код действительно извлекает информацию из объектного файла. Здесь вы можете увидеть, что было визуализировано внутри <body> 

 const setFile = () => { 
  const fileObject = document.getElementById('fileUpload').files[0]; 
  document.getElementById('title').style.display = 'block';
  document.getElementById('one').append('Name: '   fileObject.name)
  document.getElementById('two').append('Last Modified: '   fileObject.lastModified)
  document.getElementById('three').append('Last Modified Date: '   fileObject.lastModifiedDate)
  document.getElementById('four').append('Size: '   fileObject.size)
  document.getElementById('five').append('Type: '   fileObject.type)
} 
 div{margin:10px 0} 
 <input type="file" accept=".docx" type="file" id="fileUpload" onchange="setFile()" />
<h1 id="title" style="display:none">File Info</h1>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>

Комментарии:

1. Все еще не отображается

Ответ №4:

Использование тега метки вместо тега кнопки для запуска ввода файла помогло решить проблему. Хотя я не могу понять, почему.

Метки: