При клике на input type="file", скопировать путь к картинке(с компьютера) и отобразить ее в img?

Question

[Роман Савицкий]

При клике на input type="file", скопировать путь к картинке(добавляются фото с компьютера(не загружая фото на сервер)) и отобразить ее в img без перезагрузок страницы, как такое организовать, подскажите.

Answer 1

[WQP]

Через background-image

$('.upload-photo input[type="file"]').change(function(event) {
		event.preventDefault();

        var files = !!this.files ? this.files : [];
		    if ( !files.length || !window.FileReader ) return;
		    if ( /^image/.test( files[0].type ) ) {
		        var reader = new FileReader();
		        reader.readAsDataURL( files[0] );
		        reader.onloadend = function(){
		            $('.upload-photo .img').css("background-image", "url(" + this.result + ")");
		        }
		    }
	});

Answer 2

[Петр]

$('input[type="file"]').on('change', function(){
   var imgfile = this.files[0];
   if (!imgfile.type.match(/image.*/)){
        console.error("The selected file is not an image: ", imgfile.type);
        return;
    }
    var reader = new FileReader();
    reader.onload = function(e, target){
       var img = $('img.your-image');
       img.attr('src', e.target.result); 
    };
    reader.readAsDataURL(imgfile);
 });

Answer 3

[SagePtr]

Или даже проще:

$(document).ready(function() {
   $('input[type="file"]').change(function () {
        var file = this.files; //Files[0] = 1st file
        if (file[0])
          $('.preview').attr('src', URL.createObjectURL(file[0]));
    });
});

В древних браузерах может не работать.