Задать вопрос
@Krenicc
javascript

Как добавить фото из input на одной html странице, в блок div на другой html странице?

Здравствуйте есть вот такие страницы:
index.html:
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link href="assets/css/style.css?random_string rel="stylesheet">
    </head>
    <body>
        <header>
            <div id="nav-bar">
                <h2><a href="index.html">Logo</a></h2>
            </div>
        </header>
            <div id="uploaded-image">
            
            </div>
        <footer>
            
        </footer>
    </body>
</html>

admin.html:
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link href="assets/css/style.css?random_string"" rel="stylesheet">
    </head>
    <body>
        <script src="admin.js"></script>
        <header>
            <div id="nav-bar">
                <h2><a href="index.html">Logo</a></h2>
            </div>
        </header>
        <form action="upload.php" method="post" enctype="multipart/form-data">
		<label for="file">Select an image to upload:</label>
		<input type="file" id="file" name="file">
		<button type="submit">Upload</button>
	</form>
        <footer>
            
        </footer>
    </body>
</html>

И style.css:
body{
    margin:0;
    background-color:white;
    padding:0;
}

a{
    text-decoration:none;
    color:black;
}

#nav-bar{
    width:100%;
    height:50px;
    background-color:red;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background-color:#ffca61;
    border:6px solid #613a2a;
    box-sizing:border-box;
}

#admin{
    font-weight:800;
}

#uploaded-image{
    background-color:#ffca61;
    margin:auto;
    width:80%;
    height:200vh;
}

/*#meme-containet{
    background-color:#ffca61;
    margin:auto ;
    width:80%;
}*/

#add-meme-btn{    
    align-items:center ;
}

footer{
    background-color:white;
    width:100%;
    height:60px;
}

CSS я добавил что бы можно было увидеть куда конкретно нужно добавлять фото, я знаю что нужно через JS это делать, но как точно это сделать я не знаю. И вот вопрос нужно ли добовлять фото в какое-то папку? И если да то тогда путь стандартный assets/img. Можете помочь пожалуйста? Если есть вопросы спрашивайте, и заранее спасибо.
  • Вопрос задан
  • 84 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
@5465
Для того, чтобы добавить фото из input на одной HTML странице в блок div на другой HTML странице с помощью JavaScript, вам нужно выполнить следующие шаги:

В admin.html после успешной загрузки файла, сохраните имя загруженного файла в локальном хранилище с помощью localStorage.setItem(). Например:

localStorage.setItem('imageName', file.name);

Перейдите на страницу index.html с помощью window.location.href или window.location.replace(). Например:

window.location.replace("index.html");

В index.html, используйте JavaScript для получения значения имени файла из локального хранилища с помощью localStorage.getItem(). Например:

var imageName = localStorage.getItem('imageName');

Затем, используйте полученное имя файла, чтобы создать новый элемент img и добавить его в блок div с идентификатором uploaded-image. Например:

var img = document.createElement('img');
img.src = 'assets/img/' + imageName;
document.getElementById('uploaded-image').appendChild(img);


Важно отметить, что вы должны сохранить загруженный файл в папку на сервере, а затем использовать правильный путь к этому файлу при создании элемента img. Например, если вы сохраните загруженный файл в папку assets/img, то путь к файлу будет assets/img/имя_файла.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка лэндинга-визитки для юридической компании
25 нояб. 2024, в 11:40
10000 руб./за проект
Сделать интеграцию amoCRM + Яндекс.Метрика по API
25 нояб. 2024, в 11:09
4000 руб./за проект
Разработка бота рассылок в Telegram
25 нояб. 2024, в 10:16
7000 руб./за проект
Ещё заказы