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.
![enter image description here]()
Обратите внимание, что этот метод разрешает доступ к файлам только для файлов экземпляра браузера, с которым он был открыт. Если вы хотите, чтобы это происходило для всех экземпляров браузера в будущем, вы можете изменить ярлык со своего рабочего стола. Просто щелкните правой кнопкой мыши ярлык Chrome и перейдите к свойствам. Затем добавьте флаг в конец цели.
