Предварительный просмотр изображения перед загрузкой?

Question

Есть ли способ предварительного просмотра изображения на странице html перед загрузкой ito на сервер?

Мне нужно показать предварительный просмотр изображения, которое мне нужно загрузить, просто чтобы показать, что произошли изменения. Мне просто нужно изменить источник изображения. Существуют ли какие-либо существующие методы/методы, которые я мог бы использовать?

Answer 1

Я решил эту проблему, в последнее время, как это:

Я переплетены с ChangeListener к FileInput

<input type="file" name="photofile" id="photofile"> 



$('#photofile').bind("change", function(){ 
      readUrl(this); 
     }); 

и установить изображение в функции readURL до ранее пустого элемента img следующим образом:

readUrl = function(input) { 
     //if File is there 
     if(input.files && input.files[0]) { 
      //create a Filereader 
      var reader = new FileReader(); 
      //bind a function to the reader which will be executed when file is completely loaded 
      reader.onload = function(e) { 
       //Here you render your preview image 
       $("#bild-vorschau").attr("src", e.target.result); 
      } 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 

Здесь вы можете увидеть его в Working Fiddle

Answer 2

Посмотрите на эту статью Ajax Upload with Progress Bar и попробуйте демонстрацию, которую вы хотите достичь по вашему вопросу. DEMO

Это возможно FileReader, который работает над современными браузерами.

Answer 3

Это может быть достигнуто с помощью The HTML5 FileReader API

Используя только JavaScript и объект FileReader, мы можем позволить пользователю загружать изображения в приложение.

HTML код:

<input type="file" id="getimage"> 
    <fieldset> 
     <legend>Your image here</legend> 
      <div id="imgstore"></div> 
    </fieldset> 

JavaScript код:

<script> 
function imageHandler(e2) 
{ 
    var store = document.getElementById('imgstore'); 
    store.innerHTML='<img src="' + e2.target.result +'">'; 
} 

function loadimage(e1) 
{ 
    var filename = e1.target.files[0]; 
    var fr = new FileReader(); 
    fr.onload = imageHandler; 
    fr.readAsDataURL(filename); 
} 

window.onload=function() 
{ 
    var x = document.getElementById("filebrowsed"); 
    x.addEventListener('change', readfile, false); 
    var y = document.getElementById("getimage"); 
    y.addEventListener('change', loadimage, false); 
} 
</script> 

Как проверить, если браузер поддерживает HTML5 API файла:

// Checking all the possible window objects needed for file api 
if (window.File && window.FileReader && window.FileList && window.Blob) { 
    // Browser is fully supportive. 
} else { 
    // Browser not supported. Try normal file upload 
} 

Полезные реф ссылки ниже:

Demo Here

Complete Example Here

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers