Простейшая, скудная реализация API FileReader для захвата локального изображения и отображения его?

Question

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

Я ссылался на коллекцию страниц MDN (начиная с: https://developer.mozilla.org/en-US/docs/Web/API/FileReader), а также на Treehouse, но изначально изначально возникает сложность, и я очень хочу сохранить свою функцию легкой, как запасной, так и свободной от посторонней трещины, как я могу.

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

Вот getLocalImage() функция Я поставил вместе:

var body = document.getElementsByTagName('body')[0]; 
 
var fileInput = document.querySelector('input[type=file]'); 
 

 
function getLocalImage() { 
 
    var image = document.createElement('img'); 
 

 
    var reader = new FileReader(); 
 

 
    var imageFile = fileInput.files[0]; 
 
    reader.readAsDataURL(imageFile); 
 

 
    reader.onload = function(e) { 
 
     image.src = reader.result; 
 
    } 
 

 
    body.appendChild(image); 
 
} 
 

 
fileInput.addEventListener('change',getLocalImage,false);

<input type="file" />

Мои вопросы просты:

1. Может ли этот сценарий быть проще, чем это? (Я скептически настроен, но я очень хочу знать).
2. Более уместно, это сценарий тоже простой? Я опустил какие-либо рекомендации? (Например, я должен также получать размеры локального изображения, а затем установить их на веб-странице?)

Answer 1

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

  <input type="file" accept="image/*" />

• В change обратного вызова, вы должны проверить, если пользователь выбрал бы файл, или очистил выделение отменить кнопку.

• Вы можете использовать URL.createObjectURL для создания URL-адреса изображения из выбранного файла.

Так вот два варианта, как только ваш образец переработан, с некоторыми измерениями производительности, чтобы увидеть сравнение на FileReader и ObjectUrl.

function localImageSelected(event) { 
    var files = event.target.files; 
    if (files.length === 0) { 
     return; 
    } 
    var file = files[0]; 

    getImageSrcFromFile(file, function(src){ 
     var image = document.createElement('img'); 
     var now = performance.now(); 
     image.src = src; 
     image.onload = function(){ 
      console.log('Image loaded in:', performance.now() - now); 
     }; 
     document.body.appendChild(image); 
    });  
} 

function getImageSrcFromFile (file, cb) { 
    var now = performance.now(); 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     console.log('The url created in:', performance.now() - now); 
     cb(reader.result); 
    }; 
    reader.readAsDataURL(file); 
} 

document 
    .querySelector('input[type=file]') 
    .addEventListener('change', localImageSelected, false); 

И ObjectURL:

function localImageSelected(event) { 
    var files = event.target.files; 
    if (files.length === 0) { 
     return; 
    } 
    var file = files[0]; 

    var image = document.createElement('img'); 
    var url = getImageSrcFromFile(file); 
    var now = performance.now(); 
    image.src = url; 
    image.onload = function(){ 
     console.log('Image loaded in:', performance.now() - now); 

     //I do it here, but note that the url is not more usable. 
     // Or you can remove this line, then extra KBs are in memory until the page reload, 
     // usually it is not critical 
     URL.revokeObjectURL(url); 
    }; 
    document.body.appendChild(image); 
} 

function getImageSrcFromFile (file) { 
    var now = performance.now(); 
    var url = URL.createObjectURL(file); 
    console.log('The url created in:', performance.now() - now); 
    return url; 
} 

document 
    .querySelector('input[type=file]') 
    .addEventListener('change', localImageSelected, false); 

Я предпочел бы ObjectURL, как ~ 2 раза быстрее и потребляет меньше памяти, но вы должны обратить внимание на отменив URL вручную загруженного изображения затем остается в памяти до перезагрузки страницы. Строка base64 datareader очищается сборщиком мусора, когда это не является более необходимым.

Лучшее сравнение вы можете найти здесь FileReader vs. window.URL.createObjectURL