Показать загруженное изображение на другой HTML-странице

Question

Я хочу отобразить изображение, загруженное в home.html, на другую страницу с именем result.html.

<div class="custom-file">
                <input type="file" class="custom-file-input" name="myfile" onchange="readURL(this);">
                <label class="custom-file-label" for="customFile" name="myfile">Choose file</label>
        </div>
        <div style="text-align: center;">
        <input type="submit" class="mybtn" onclick="showInput();">
        </div>

Я хочу показать загруженное изображение с именем = "myfile" на странице result.html. ,Как мне это сделать?

Answer 1

Обычно это делается на стороне сервера, но вы можете загрузить файл в локальное хранилище и затем сослаться на него на следующей странице. Это не обязательно будет работать во всех браузерах.

• https://stackoverflow.com/a/16505576/5065282
• https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

Answer 2

#1 Make div inside home.html <div id="foresult"></div> and store your value inside
#2 Make result.html
#3 Make <div id="result"></div> inside result.html
#4 Use this JQuery script inside result.html to get value from home.html

    <script> 
    $(document).ready(function(){
    $('#result').load('home.html #foresult');
    });
    </script>

Answer 3

Много возможностей. Зависит от области применения и требований.

Вариант 1. Использование базы данных

Сохранение загруженного изображения в базе данных с первой страницы. База данных может быть любой - MySql, MSSQL и т. Д. Вторая страница считывает содержимое изображения из базы данных.

Вариант 2. Использование кеша памяти

Вы можетепросто сохраните изображение в распределенном кеше памяти, например memcached или redis .

Вариант 3 - Использование файловой системы

Для очень тривиальных приложений (один веб-сервер) используйте локальную файловую систему в качестве хранилища данных. Я бы не рекомендовал это .

Надеюсь, это поможет.

Answer 4

Если вы хотите сделать это без использования каких-либо внутренних языков или серверной части, да, вы можете!

Существует сложный способ использования JavaScript или jQuery:

1. Создание функции для сохранения загруженного изображения в папку проекта и сохранения загруженного изображения src в переменной JS.
2. Создать onclick функцию, которая получает изображение src из предопределенной переменной.
3. Также эта функция перенаправит на вашу страницу result.html с изображением src как parameter, как \result.html?img=SRC-FROM-FUNCTION.
4. На другой странице создайте функцию для чтения этого parameter и добавьте тег img с src из url.

Тем не менее, я рекомендую использовать внутренний язык, такой как PHP или C #, для этого, это решение, потому что вы используете простые статические страницы.

Answer 5

Я бы лично использовал страницу загрузки php для загрузки изображения, и у меня была бы страница, на которой вы хотите показать изображение, есть массив php для всех загруженных изображений и файл foreach с .jpg и т. Д. в html