Что такое FileRider()?

FileRider() - метод API HTML5, который используется для чтения локальных файлов. С помощью FileRider() можно создать превью (миниатюру) изображения перед отправкой на сервер, проверить совпадение типа фала с его расширением, ограничить размер загружаемого файла и т.д.

FileRider() поддерживает следующие браузеры:

Состояние дел на текущий момент можно посмотреть здесь: http://caniuse.com/#feat=filereader

HTML форма загрузки изображений

И так приступим. Для начала нам нужно сделать форму загрузки изображений: 

<div class="container">
    <div class="row">
        <label>Загрузить один файл:</label>
        <input type="file" id="file" name="file" />
    </div>
    <div class="row">
        <span id="output"></span>
    </div>
    <div class="row">
        <label>Мультизагрузка файлов:</label>
        <input type="file" id="fileMulti" name="fileMulti[]" multiple />
    </div>
    <div class="row">
        <span id="outputMulti"></span>
    </div>
</div>

Весь код формы описывать нет смысла. В примере 2 вида загрузки, 1 файл и мультизагрузка.

Код JavaScript для отображения превью изображений перед отправкой на сервер

JavaScript для отображения превью одного файла: 

<script>
function handleFileSelect(evt) {
    var file = evt.target.files; // FileList object
    var f = file[0];
    // Only process image files.
    if (!f.type.match('image.*')) {
        alert("Image only please....");
    }
    var reader = new FileReader();
    // Closure to capture the file information.
    reader.onload = (function(theFile) {
        return function(e) {
            // Render thumbnail.
            var span = document.createElement('span');
            span.innerHTML = ['<img class="thumb" title="', escape(theFile.name), '" src="', e.target.result, '" />'].join('');
            document.getElementById('output').insertBefore(span, null);
        };
    })(f);
    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
}
document.getElementById('file').addEventListener('change', handleFileSelect, false);
</script>

JavaScript отображения превью для мультизагрузки: 

<script>
function handleFileSelect(evt) {
    var file = evt.target.files; // FileList object
    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
        // Only process image files.
        if (!f.type.match('image.*')) {
            alert("Image only please....");
        }
        var reader = new FileReader();
        // Closure to capture the file information.
        reader.onload = (function (theFile) {
            return function (e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb" title="', escape(theFile.name), '" src="', e.target.result, '" />'].join('');
                document.getElementById('output').insertBefore(span, null);
            };
        })(f);
        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}
document.getElementById('file').addEventListener('change', handleFileSelect, false);
</script>

Итог

В итоге получим следующее: