Подтвердить что ты не робот

Chrome FileReader

Может ли кто-нибудь дать мне пример использования API FileReader для получения содержимого файла в chrome?

Кажется, для меня возвращается undefined.

<!doctype html>
<html>
<script>
function handle_files(files) {
  console.log(files)
  reader = new FileReader()
  ret = []
  for (i = 0; i < files.length; i++) {
    file = files[i]
    console.log(file)
    text = reader.readAsText(file) //readAsdataURL
    console.log(text) //undefined
    ret.push(text)
  }
  console.log(ret) // [undefined]

}
</script>
<body>
FileReader Test
<input type="file" onchange="handle_files(this.files)">
</body>
</html>

Ответ 1

Моя проблема заключалась в том, что я предположил, что FileReader был синхронным. Вот правильный способ сделать это. Если вы находитесь на хроме, этот код должен быть запущен на сервере (localhost или на сайте). Он не будет работать с локальным файлом.

<!doctype html>
<html>
<script>
function handle_files(files) {
  for (i = 0; i < files.length; i++) {
    file = files[i]
    console.log(file)
    var reader = new FileReader()
    ret = []
    reader.onload = function(e) {
      console.log(e.target.result)
    }
    reader.onerror = function(stuff) {
      console.log("error", stuff)
      console.log (stuff.getMessage())
    }
    reader.readAsText(file) //readAsdataURL
  }

}
</script>
<body>
FileReader that works!
<input type="file" multiple onchange="handle_files(this.files)">
</body>
</html>

Ответ 2

Объект File API FileReader работает аналогично в Chrome, как в FireFox, Opera или Internet Explorer 10 (Yup, работает в IE).

Простой пример

Вы начинаете с объявления нового экземпляра читателя:

var reader = new FileReader();

Определите свои обратные вызовы для различных events:

reader.onloadend = function( ){
    document.body.style.backgroundImage = "url(" + this.result + ")";
}

И затем передайте ему что-то, чтобы читать:

reader.readAsDataURL( file );

Fiddle: http://jsfiddle.net/jonathansampson/K3A9r/

Обработка нескольких файлов

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

// Continue only if we have proper support
if ( window.FileReader ) {

  // Provide our logic upon the change even of our input
  document.getElementById("collection").onchange = function(){

    // Couple variables for handling each file
    var counter = -1, file;

    // Cycle over all files
    while ( file = this.files[ ++counter ] ) {

      // Create a reader for this particular file
      var reader = new FileReader();

      // Respond to the onloadend event of the reader
      reader.onloadend = (function(file){
        return function(){
          var image = new Image();
          image.height = 100;
          image.title = file.name;
          image.src = /^image/.test(file.type) ? this.result : "t9QlH.png";
          document.body.appendChild( image );
        }
      })(file);

      // Begin reading data for this file
      reader.readAsDataURL( file );
    }
  }
}

Fiddle: http://jsfiddle.net/jonathansampson/jPTV3/

Обнаружение функций

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

if ( window.FileReader ) {
    // Safe to use FileReader
}

Выполняется локально, из Chrome

Я должен заметить, что выполнение этого в файле:///path в Chrome приведет к нарушенному опыту. По умолчанию текущие версии Chrome не позволяют файлу:///страницы обращаться к другим файлам. Вы можете изменить это поведение при загрузке Chrome с помощью --allow-file-access-from-files.

Обратите внимание, что этот метод разрешает доступ к файлам только для файлов экземпляра браузера, с которым он был открыт. Если вы хотите, чтобы это происходило для всех экземпляров браузера в будущем, вы можете изменить ярлык со своего рабочего стола. Просто щелкните правой кнопкой мыши ярлык Chrome и перейдите к свойствам. Затем добавьте флаг в конец цели.