1

Здравствуйте, Уважаемое сообщество! И сразу к проблеме: на странице редактирования профиля имеется поле для загрузки пользователем фонового изображения персональной страницы.

<div id="image_profileFon">
    <div class="data" style="display:none">
        <input class="input" name="profileFon[original]" value="" type="hidden">
    </div>
    <div class="preview">
        <img src="">
        <a href="javascript:" onclick="images.remove('profileFon')">Удалить</a>
    </div>
    <div class="upload block" style="display:none">
        <div id="file-profileFon">
            <div class="upload-button">
                Выбрать и загрузить
                <input name="file" type="file">
            </div>
        </div>
    </div>
</div>

<div id="fon_preview">
</div>

Изначально блок class="data" пуст и скрыт(display:none). Скрытый input class="input" появляется в нем только при наличие значения (то есть при загрузки изображения через input расположенный в блоке class="upload block").

Блок class="preview" со всеми элементами присутствует всегда, только свойство src у img также получает значение после загрузки изображения через input расположенный в блоке class="upload block".

При отсутствие загруженного изображения src="", а блок class="data" не имеет вложенных элементов (input class="input").

Мне нужно значение загруженного изображения (ссылку на изображение) использовать в качестве background-image у блока id="fon_preview".

Сначало было сделано так:

var idFon = document.getElementsByName("profileFon[original]")[0].value;
document.getElementById('fon_preview').style.backgroundImage = 'url(/'+ idFon + ')';

Это работает. Конечно при отсутствие input выдавало defined (наверняка повозившись это можно решить), Не устраивает то, что значение обновляется только при фокусе на другой инпут при дальнейшем редактирование профиля.

Вторым решением было отслеживать изменения через setInterval(). При загрузке страницы (! при ранее загруженном изображении), проверка через заданный интервал производилась ровно до момента удаления изображения . После блок class="data" очищался. При загрузке нового изображения появившейся input class="input" уже не проверяется. И в фоне id="fon_preview" висит 'старая' ссылка(значение).

Решено проверять наличие значение у src (img src="" всегда присутствует(даже без ссылки)).

PS: На данный момент сделано так:

<script>
$(document).ready(function() {

var clickOn = document.querySelector('#file-profileFon input[type=file]');
var clickOff = document.querySelector('.preview a');

var idFon = document.querySelector('.preview img').src;
document.getElementById('fon_preview').style.backgroundImage = 'url('+ idFon + ')';

function readURL() {
if (this.files && this.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
        idFon = e.target.result;
        document.getElementById('fon_preview').style.backgroundImage = 'url('+ idFon + ')';
    };
    reader.readAsDataURL(this.files[0]);
    };
};

function clearURL() {
idFon = '' ;
document.getElementById('fon_preview').style.backgroundImage = 'url('+ idFon + ')';
};

clickOn.addEventListener('change', readURL, false); 
clickOff.addEventListener('click', clearURL, false);    

});
</script>

При загрузке страницы все отрабатывает как надо, но только один раз. После первой загрузки изображения,значение загруженного изображения (ссылка на изображение) используется в качестве background-image у блока id="fon_preview". При удаление значение очищается, а при повторной загрузки изображения (без перезагрузки страницы) значение уже не подставляется. При просмотре кода в инспекторе замечено у инпута type="file" после первой загрузки пропадает обработчик событий.

Буду признателен, если кто-то подскажет возможные варианты решений с учетом вышеуказанного. Большое спасибо за внимание к вопросу!

1
  • В этой чачти <div class="preview"> <img src=""> </div> при наличие значения превьюшка отображается, не могу сообразить каким образом дублировать ее фоновым изображением в блок id="fon_preview. Чтобы при этом все изменения в src="" тут же передавались в id="fon_preview.
    – Curious
    23 мар 2018 в 13:08

1 ответ 1

1

Возможно Вам может помочь данный вариант...

function updateImageUser(image) {
    $.ajax({
        type:"post",
        url:"push logo url",
        data:image,
        success:function (data) {
            $('.preview').css('background-image',data)
            // or
            $('.preview').attr('src',data);
        },
        error:function (err) {
            console.log(err);
        }

    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
6
  • Спасибо, но в данной ситуации это наверное не выход. Поскольку при удаление превью (очистки src в блоке <div class="preview"> фон #fon_preview тоже должен очиститься). Желательно все это без применения ajax.
    – Curious
    23 мар 2018 в 13:58
  • Поскольку основная часть файлов являются сторонними и регулярно обновляются, хочется все это реализовать в подключаемом файле без глубокой правки оригинала.
    – Curious
    23 мар 2018 в 14:04
  • Здравствуйте, Sair! Я дополнил вопрос, быть может Вы мне подскажите в чем причина несрабатывания скрипта при повторной загрузки изображения (потеря обработчика). Заранее спасибо.
    – Curious
    25 мар 2018 в 11:46
  • 1
    Если проблема только в пропадании обработчика событий при повторной загрузке...попробуйте после загрузки или во время очистки заново перезаписывать обработчик...
    – sair
    26 мар 2018 в 16:34
  • Я именно так и поступил. Перезаписываю обработчик после загрузки. Но Вам тем не менее все равно спасибо, за то что не остались в стороне. Как я могу Вас отблагодарить, ведь данный выше Вами ответ, в моем конкретно случае, задачу не решил?
    – Curious
    28 мар 2018 в 16:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.