1

Как получить данные в Base64 из данных файла input form?

Вот так мы читаем данные файла из input form, как можно получить Base64 из fileList?

HTML

<form action="upload.php" method="POST" id="uploadform">
        <input id="uploadBtn" type="file" name="file"/>
        <input type="submit" value="Upload"/><br/><br/>
</form>

JS

var inputElement = document.getElementById("uploadBtn");
    inputElement.addEventListener("change", handleFiles, false);

function handleFiles() {

        var fileList = this.files; 
}
1
  • Зачем может пригодится base64 файла на клиентской строне?
    – UserName
    15 мая 2016 в 22:09

1 ответ 1

2

Можно прочитать файл с помощью FileReader(), и взять результат в Base64 из поля target.result результата.

function handleFiles() {
  var reader = new FileReader(),
    input = document.getElementById('input').files[0],
    output = document.getElementById('output');
  reader.addEventListener("loadend", function(result) {
    output.innerHTML = result.target.result;
  }, false);
  reader.readAsDataURL(input);
}
<input id="input" type="file" onchange="handleFiles()" />
<p id="output"></p>

3
  • Как считаете, это кроссбраузерный вариант?
    – gilo1212
    15 мая 2016 в 22:15
  • @gilo1212 , Вот тут посмотрите
    – UserName
    15 мая 2016 в 22:21
  • @UserName Понятнентько. Спасибо. Вообщем IE 9 и меньше не поддерживает.
    – gilo1212
    15 мая 2016 в 22:24

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.