Вывести загруженное изображение через JavaScript

@Mishuuutka · Регистрация: 18.12.2017

Студворк — интернет-сервис помощи студентам

Нужно вывести загруженное изображение в HTML коде, через JavaScript. Загрузка файла через input.
Загрузка файла в 93 строке, вывод в 50.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>Главная Страница</title>
    [JS]<script>
        function check(form) {
            if ((form.Name.value != "") && (form.work.value != "") && (form.Desc.value != "") && (form.confirm.checked) && (form.cod.value == "0096")) {
                document.getElementById("result_1").innerHTML = "<p> Название: " + form.Name.value + "</p>";
                if (form.category[0].checked)
                    document.getElementById("result_2").innerHTML = "<p>Категория: Жесткий диск</p>";
                if (form.category[1].checked)
                    document.getElementById("result_2").innerHTML = "<p>Категория: Видеокарта</p>";
                if (form.category[2].checked)
                    document.getElementById("result_2").innerHTML = "<p>Категория: Материнская плата</p>";
                switch (form.made.value) {
                    case "1":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: AMD </p>";
                        break;
                    case "2":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: Intel </p>";
                        break;
                    case "3":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: ASUS </p>";
                        break;
                    case "4":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: MSI </p>";
                        break;
                    case "5":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: Siagate </p>";
                        break;
                    case "6":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: Hitachi </p>";
                        break;
                    case "7":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: Toshiba </p>";
                        break;
                    case "8":
                        document.getElementById("result_3").innerHTML = "<p>Ваша марка: Gigabyte </p>";
                        break;
                }
                document.getElementById("result_4").innerHTML = "Ваш объект работает с:";
                for (var i = 0; i < form.work.options.length; i++) {
                    if (form.work.options[i].selected == true) {
                        document.getElementById("result_4").innerHTML = document.getElementById("result_4").innerHTML + form.work.options[i].value + "  ";
                    }
                }
                document.getElementById("result_5").innerHTML = "<p> Описание объекта: <br>" + form.Desc.value + "</p>";
                [COLOR="Red"]document.getElementById("result_6").innerHTML = "<p> Ваша фотография: <br> <img src='" + form.photo.value + "' width='100' height='100' ></p>";[/COLOR]
            } else if (form.Name.value == "")
                alert("Введите название объекта!")
            else if (form.made.value == 0)
                alert("Выберите марку объекта")
            else if (form.work.value == "")
                alert("Выберите с чем работает объект!")
            else if (form.Desc.value == "")
                alert("Введите описание объекта!")
            else if (!form.confirm.checked)
                alert("Нужно согласиться с правилами сайта!")
            else if (form.cod.value != "0096")
                alert("Неправильно введена капча!")
        }
    </script>[/JS]
</head>
 
<body>
    <form name="create" method="GET" action="newObj.html">
        Название объекта: <br>
        <input name="Name" type="text" size="20" maxlength="40"> <br> Категория: <br>
        <input type="radio" name="category" value="HDD" checked> Жесткий диск <br>
        <input type="radio" name="category" value="VIDEOCARD"> Видеокарта <br>
        <input type="radio" name="category" value="MATHERBOARD"> Материнская плата <br> Марка: <br>
        <select name="made">
            <option value="0"> Выберите марку </option>
            <option value="1"> AMD </option>
            <option value="2"> Intel </option>
            <option value="3"> ASUS </option> 
            <option value="4"> MSI </option>
            <option value="5"> Seagate </option>
            <option value="6"> Hitachi </option>
            <option value="7"> Toshiba </option>
            <option value="8"> Gigabyte </option>
        </select> <br> Работает с:<br>
        <select name="work" multiple>
            <option value="Графикой"> Графикой </option>
            <option value="Данными"> Данными </option>
            <option value="Вычислениями"> Вычислениями </option>
            <option value="Физикой"> Физикой </option>
            <option value="Другое"> Другое </option>
        </select> <br> Описание объекта: <br>
        <textarea name="Desc" rows="10" cols="50" maxlength="300"></textarea><br> Фотография: <br>
       [COLOR="Red"] <input name="photo" type="file" multiple accept="image/*">[/COLOR] <br><br> Я согласен с правилами сайта:
        <input type="checkbox" name="confirm"> <br><br> Введите код с картинки:
        <input name="cod" type="password" size="10" maxlength="4">
        <img src="capcha.png" width="100" height="50"> <br>
        <input type="button" value="Добавить" onclick="check(this.form)">
    </form>
    <div id="result_1"></div>
    <div id="result_2"></div>
    <div id="result_3"></div>
    <div id="result_4"></div>
    <div id="result_5"></div>
    <div id="result_6"></div>
</body>
 
 
</html>

Добавлено через 1 час 25 минут
Ответ найден, в google chrome это работать не будет, т.к гугл скрывает путь к выбранному изображению, а так как мы работает через локальный сервер это работать не будет)

Qwerty_Wasd · 12.05.2018, 17:20

Mishuuutka,

Сообщение от Mishuuutka

google chrome это работать не будет, т.к гугл скрывает путь к выбранному изображению, а так как мы работает через локальный сервер это работать не будет)

шта?
Открываем песочницу в Chrome => песочница

HTML5
1
2
3
<img id="image_preview" src="" height="350" width="350" alt=""/>
<input class="test" type="file" accept="image/*" onchange="AddImg();"/>
<button class="btn btn-secondary delete-link remove" type="button" onclick="DeleteImg();">Удалить</button>

JavaScript
1
2
function AddImg(){image_preview.src = URL.createObjectURL(event.target.files[0])}
function DeleteImg(){document.querySelector('.test').value = ''; image_preview.src = ""; URL.revokeObjectURL(image_preview.src)}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .