AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Как сделать предпросмотр картинки перед загрузкой на сервер на javascript



Исходный код этого примера:

<script type="text/javascript">
function handleFiles(files){
   document.getElementById('text').innerHTML='';
   document.getElementById('image').innerHTML='';
   for(var i=0;i<files.length;i++){
      var f = files[i];
      if(f.type.indexOf('text')==0){
           var reader = new FileReader();
           reader.onload = function(evt) {
               var ta = document.createElement('textarea');
               ta.cols = 100;
               ta.rows = 4;
               ta.style.display='block';
               ta.value = evt.target.result;
               document.getElementById('text').appendChild(ta);
           };
           reader.readAsText(f, 'UTF-8');
           }else if(f.type.indexOf('image')==0){
               var img = document.createElement('img');
               img.src = f.getAsDataURL();
			img.style.width='300px';
               document.getElementById('image').appendChild(img);
      }
   }
}
</script>

<form method="post">
   <input type="file" id="input" multiple="true" onchange="handleFiles(this.files)" />
</form>
<div id="text"></div>
<div id="image"></div>


.

© Copyright 2008-2016 by KDG