Блог

Мне нужно загрузить изображение и установить источник существующего изображения для этого загруженного
изображение загружено, но новый источник не работает

 <img class='avat' id='avat' src='ph/avat.jpg' alt='img'>
<input type='file' id='inpfile' accept=".jpg">
  

js

 var imgavat = $('#avat');
var inpfile = $('#inpfile');
inpfile.on('change', function(){
    var uid = $('.aact').attr('data-id');
    var file = $(this).prop('files')[0];
    var form = new FormData();
    form.append('inpfile', file);
    form.append('uid', uid);
    $.ajax({
        url: "a_members_pro_plus.php",
        type: 'post',
        cache: false,
        contentType: false,
        processData: false,
        data: form,
        success: function(data){
            console.log(data); // avat/1.jpg - new source - ok
            imgavat.attr('src', data);  // doesn't work
            inpfile.val('');
        }
    });
});
  

Вы можете объединить FileReader с .readAsDataURL(), чтобы получить файл и заменить его на avatar .

Когда вы выбираете файл на своем локальном компьютере с помощью inpfile, запускается событие изменения.

В этом случае вам нужно проверить, есть ли один файл (пользователь выбрал файл):

 this.files[0]
  

Если файл существует, вы можете создать экземпляр FileReader (необходимый для чтения файла) и добавить к нему обработчик для завершения загрузки:

 var reader  = new FileReader();
    reader.onloadend = function () {
  

Когда файл будет полностью загружен, вы можете изменить атрибут вашего аватара:

 imgavat.attr('src', reader.result);
  

Чтобы запустить этот асинхронный процесс, вам необходимо прочитать файл как URL-адрес данных, чтобы вы могли обновить изображение avatar src:

 reader.readAsDataURL(this.files[0]);
  

Фрагмент:

 var imgavat = $('#avat');
var inpfile = $('#inpfile');
inpfile.on('change', function() {
    if (this.files[0]) {   
        var reader  = new FileReader();
        
        reader.readAsDataURL(this.files[0]);
        
        reader.onloadend = function () {
            imgavat.attr('src', reader.result);
        };
    }
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<img class='avat' id='avat' src='ph/avat.jpg' alt='img'>
<input type='file' id='inpfile' accept=".jpg">