Как показать превью загружаемой картинки, не отправляя ее на сервер

04.11.2015
Допустим, нам понадобилось производить действия с картинкой, еще до того, как пользователь загрузил ее на сервер. Т.е. человек уже выбрал файл, используя input[type=file], но еще не отправил форму на сервер (не нажал button[type=submit]).

Вот пример того, как можно отобразить загруженную картинку в img:

1
2
3
4
5
6
7
8
9
10
11
12
 
<img id="uploadPreview" style="width: 100px; height: 100px;" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />

<script>
function PreviewImage() {
    var oFReader = new FileReader();
    oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
    oFReader.onload = function (oFREvent) {
        document.getElementById("uploadPreview").src = oFREvent.target.result;
    };
};
</script>

Категории: HTML
Яндекс.Метрика