Здравствуйте, Уважаемое сообщество! И сразу к проблеме: на странице редактирования профиля имеется поле для загрузки пользователем фонового изображения персональной страницы.
<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" после первой загрузки пропадает обработчик событий.
Буду признателен, если кто-то подскажет возможные варианты решений с учетом вышеуказанного. Большое спасибо за внимание к вопросу!