Объект File API FileReader работает в Chrome так же, как и в FireFox, Opera или Internet Explorer 10 (Да, работает в IE ).
Простой пример
Вы начинаете с объявления нового экземпляра читателя:
var reader = new FileReader();
Определите ваши обратные вызовы для различных событий :
reader.onloadend = function( ){
document.body.style.backgroundImage = "url(" + this.result + ")";
}
А затем передайте что-нибудь, чтобы прочитать:
reader.readAsDataURL( file );
Скрипка: http://jsfiddle.net/jonathansampson/K3A9r/
Обработка нескольких файлов
Когда вы работаете с несколькими файлами, все немного по-другому. Хотя очевидно, что нам нужно циклически перебирать итоговый FileList, нам также нужно будет использовать замыкание, чтобы предотвратить подделку данных файла в течение многочисленных итераций:
// 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 );
}
}
}
Скрипка: http://jsfiddle.net/jonathansampson/jPTV3/
Обнаружение функций
Несмотря на то, что FileReader доступен практически во всех современных браузерах, вы все равно должны быть уверены, что пользователи старых браузеров не будут вызывать шумиху. Перед использованием FileReader обязательно проверьте объект окна на его наличие:
if ( window.FileReader ) {
// Safe to use FileReader
}
Работает локально, из Chrome
Я должен заметить, что выполнение этого в пути file: /// в Chrome приведет к поломке. По умолчанию текущие версии Chrome не разрешают файлам: /// страницам обращаться к другим файлам. Вы можете изменить это поведение, загружая Chrome с флагом --allow-file-access-from-files.
Обратите внимание, что этот метод разрешает доступ к файлам только для экземпляра браузера, с которым он был открыт. Если вы хотите, чтобы это было так для всех экземпляров браузера в будущем, вы можете изменить ярлык со своего рабочего стола. Просто щелкните правой кнопкой мыши ярлык Chrome и перейдите в свойства. Затем добавьте флаг в конец цели.