Загрузите файл автоматически без использования кнопки щелчка

Я новичок в яваскрипт и хотите загрузить файл без того, чтобы нажать на кнопку загрузки файлаЗагрузите файл автоматически без использования кнопки щелчка

Я использую следующий сценарий, и я хочу текст, который будет загружен автоматически в текстовом поле.

<html> 
    <body> 
     <table> 
      <tr> 
       <td>Select a File to Load:</td> 
       <td> 
        <input type="file" id="fileToLoad"> 
       </td> 
       <td> 
        <button onclick="loadFileAsText()">Load File</button> 
       <td> 
      </tr> 
      <tr> 
       <td colspan="3"> 
        <textarea id="inputTextToSave" style="width:512px;height:256px"></textarea> 
       </td></tr> 
      </tr> 
     </table> 
    </body> 
</html> 

<script type='text/javascript'> 
function loadFileAsText() 
{ 
    var fileToLoad = document.getElementById("fileToLoad").files[0]; 
    var fileReader = new FileReader(); 
    fileReader.onload = function(fileLoadedEvent) 
    { 
     var textFromFileLoaded = fileLoadedEvent.target.result; 
     document.getElementById("inputTextToSave").value = textFromFileLoaded; 
    }; 
    fileReader.readAsText(fileToLoad, "UTF-8"); 
} 
</script>

Заранее благодарим за помощь.

источник

2015-09-21 John Smith

Попробуйте добавить атрибут onchange, это вызовет функции, когда изменения будут внесены на этот вход.

<input type="file" id="fileToLoad" onchange="loadFileAsText()">

Demo

function loadFileAsText(){ 
 
var fileToLoad = document.getElementById("fileToLoad").files[0]; 
 
var fileReader = new FileReader(); 
 
    fileReader.onload = function(fileLoadedEvent){ 
 
     document.getElementById("inputTextToSave").value = fileLoadedEvent.target.result; 
 
    }; 
 
fileReader.readAsText(fileToLoad, "UTF-8"); 
 
}

<table><tr> 
 
<td>Select a File to Load:</td> 
 
<td><input type="file" id="fileToLoad" onchange="loadFileAsText()"></td> 
 
           <!-- ^^ onchange attribute added ^^ --> 
 
</tr><tr> 
 
<td colspan="2"><textarea id="inputTextToSave" style="width:512px;height:256px"></textarea></td> 
 
</tr></table>

Если у вас есть какие-либо вопросы по поводу выше исходного кода, пожалуйста, оставьте комментарий ниже, и я вернусь к вам, как как можно скорее.

Надеюсь, это поможет. Счастливое кодирование!

источник

2015-09-21 18:14:47 NewToJS

Абсолютно отлично. Большое спасибо... :) –

Вы можете просто вызвать функцию по себе, как это:

loadFileAsText();

источник

2015-09-21 17:42:13 vsvs

Спасибо за комментарий. Однако я все еще не знаю, что делать. Можете ли вы изменить код ... –

Просто добавьте это в свой файл сценария 'window.onload = loadFileAsText;' – vsvs

Спасибо. @TurboTech. Я уверен, что что-то нужно было бы удалить из кода. Я не уверен –

Вы можете сделать это с помощью событий JavaScript. напр: вы можете позвонить, как показано ниже:

<input type="file" id="fileToLoad" onblur="loadFileAsText()">

источник

2015-09-21 17:44:36 Manju

Спасибо за ответ @Manju. Поскольку я новичок в javascript, как выглядит точный код. Если вы можете помочь ... –

Я просто просмотрел ваш код, в основном вы пытаетесь прочитать данные файла и отображать его. однако функция loadFileAsText() еще не делает этого. – Manju

проверьте точный код, который я разместил в https://jsfiddle.net/jage0e48/1/, чтобы прочитать данные файла и отобразить его – Manju

Ответить на ready события документа:

$(document).ready(loadFileAsText);

Если вы не хотите использовать JQuery для простой совместимости с несколькими браузерами, то увидеть этот ответ : pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

источник

2015-09-21 17:45:08 dsh

Загрузите файл автоматически без использования кнопки щелчка

ответ

Смежные вопросы