Отображение загружаемой, но еще не загруженной картинки профиля

@paskalnikita · Регистрация: 12.08.2014

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

Всем доброго времени суток! Хочу сделать отображение загружаемой, но еще не загруженной картинки профиля.

PHP
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
<?php 
    function change_profile_image($user_id, $file_temp, $file_extn){
        $file_path = 'images/profile/'.substr(md5(time()), 0, 10) . '.' . $file_extn;
        move_uploaded_file($file_temp, $file_path);
        mysql_query("UPDATE `users` SET `profile` = '" . mysql_real_escape_string($file_path) . "' WHERE `user_id` = " . (int)$user_id);
    }
 
                            if (isset($_FILES['profile']) === true) {
                    if (empty($_FILES['profile']['name']) === true) {
                        echo "<div class='img-file-error'>Please choose a file!</div>";
                    } else {
                        $allowed = array(' jpg', 'jpeg', 'gif', 'png');
                        $file_name = $_FILES['profile']['name'];
                        $file_extn = strtolower(end(explode('.', $file_name)));
                        $file_temp = $_FILES['profile']['tmp_name'];
                        if (in_array($file_extn, $allowed) === true) {
                            change_profile_image($session_user_id, $file_temp, $file_extn);
                            echo "<meta http-equiv='refresh' content='0; url=http://www.page.com/index'/>";
                        } else {
                            echo "<div class='img-file-error'>Incorrect file type!<br>
                            Allowed types : ";
                            echo implode(', ', $allowed);
                            echo ".</div>";
                            }
                        }
                } ?>
            <div>Your profile's photo:</div>
            <?php
                if (empty($user_data['profile']) === false) {
                    echo '<img class="img-settings" width="250px" src="', $user_data['profile'], '" alt="',$user_data['first_name'],'\'s profile image">';
                }
            ?>
                <form action="" method="post" enctype="multipart/form-data">
                    <input type="file" name="profile"><br>
                    <input class='green-border' type="submit">
                </form>
            </div>

Суть в том, что в моем варианте картинка изменяется после записи ее в бд. Как сделать так, дабы после выбора было показано как она будет выглядеть, и лишь потом, просмотрев ее я мог отправить ее на сервер? Заранее спасибо!

@terri · 30.04.2015, 16:09

Если я понял задачу, то:
JS код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 function onFileSelect(e) {
  var 
    f = e.target.files[0], // Первый выбранный файл
    reader = new FileReader,
    place = document.getElementById("previewImg") // Сюда покажем картинку
  ;
  reader.readAsDataURL(f);
  reader.onload = function(e) { // Как только картинка загрузится
    place.src = e.target.result;
  }
};
if(window.File && window.FileReader && window.FileList && window.Blob) {
  document.querySelector("input[type=file]").addEventListener("change", onFileSelect, false);
} else {
  console.warn( "Ваш браузер не поддерживает FileAPI")
};

Пример кода.

HTML5
1
2
3
4
<img id="previewImg" /><br>
  <span>Загрузка картинки</span>
    <input type="file" multiple="true"  onchange="preview(this.value)"/>
        </div>

@paskalnikita · 30.04.2015, 16:31 **[ТС]**

но что-то не отображается картинка после ее выбора

@terri · 30.04.2015, 16:57

paskalnikita, изменили ID элемента, куда будет показана картинка? У меня это previewImg (<img id="previewImg" />)
Только что проверил на чистом html файле. Всё работает прекрасно

Отображение загружаемой, но еще не загруженной картинки профиля

@paskalnikita · 30.04.2015, 17:18 **[ТС]**

то,что вы написали постом выше я написал на отдельной странице, после того, как выбираю картинку ничего не происходит

Добавлено через 13 минут
просто фот так у меня идет код на странице, почему не работает?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
    function onFileSelect(e) {
  var 
    f = e.target.files[0], // Первый выбранный файл
    reader = new FileReader,
    place = document.getElementById("previewImg") // Сюда покажем картинку
  ;
  reader.readAsDataURL(f);
  reader.onload = function(e) { // Как только картинка загрузится
    place.src = e.target.result;
  }
};
if(window.File && window.FileReader && window.FileList && window.Blob) {
  document.querySelector("input[type=file]").addEventListener("change", onFileSelect, false);
} else {
  console.warn( "Ваш браузер не поддерживает FileAPI")
};
</script>
<img id="previewImg" /><br>
  <span>Загрузка картинки</span>
    <input type="file" multiple="true"  onchange="preview(this.value)"/>
        </div>

Добавлено через 2 минуты
о, теперь рабоатет, подключил после инпута- заработало

@terri · 30.04.2015, 17:23

paskalnikita,

Да-да, забыл сказать. Я всегда пишу js в самом конце документа. Думал, что все так пишут и не сказал

@paskalnikita · 30.04.2015, 17:29 **[ТС]**

но вот только один момент: если файл выбираю не картинку, то хочу, дабы превью пуcтого не было, чтобы картинка просто не поменялась, понимаете? Можно ли как-то это реализоать?

@terri · 30.04.2015, 18:00

paskalnikita, да, можно. Нужно проверку делать на тип файла. Или же изначально задавать тип файла, который можно выбрать(jpeg,png ect). Есть множество примеров кода, которые позволяют это делать. И на php, и на ajax
Например, можно тут посмотреть тык
пример php
Вытащить кусочки кода и будет нормально

@paskalnikita · 30.04.2015, 18:16 **[ТС]**

Не, в самом php у меня есть проверка на тип файла, но с js я не знаком(не учил),логично, что и с ajax тоже. Может, подбросите еще какое решение(раз там js и ajax \)?

@terri · 30.04.2015, 18:36

paskalnikita, тык
Этот пример может вам 100% помочь. Тут сразу идет превьюшка + проверка на тип файла. Демо просмотрите

@paskalnikita · 30.04.2015, 18:41 **[ТС]**

изменил так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    function onFileSelect(e) {
    var
        f = e.target.files[0], // Первый выбранный файл
        reader = new FileReader,
        place = document.getElementById("previewImg") // Сюда покажем картинку
    ;
    reader.readAsDataURL(f);
    reader.onload = function(e) { // Как только картинка загрузится
        place.src = e.target.result;
    }
    };
    if(window.File && window.FileReader && window.FileList && window.Blob) {
      document.querySelector("input[type=file]").addEventListener("change", onFileSelect, false);
    } else {
      console.warn( "Ваш браузер не поддерживает FileAPI");
    };
    onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
status.text('Поддерживаемые форматы JPG, PNG или GIF');
return false;
}

Что не так сделал? Подскажите.

@terri · 30.04.2015, 18:56

paskalnikita, какие ошибки в консоли?
<script type="text/javascript" src="js/ajaxupload.3.5.js"></script> подключили?
function(file, ext) - посмотрите в примере php, что это за переменные

@paskalnikita · 30.04.2015, 18:59 **[ТС]**

SyntaxError: function statement requires a name settings:
ReferenceError: preview is not defined

@terri · 30.04.2015, 19:02

paskalnikita, подставьте свои переменные из php кода идентично примеру.
Или же возьмите код с примера, измените классы/id на своё и будет работать

@paskalnikita · 30.04.2015, 19:10 **[ТС]**

блин, ну торможу там, может подбросите какое решение, с мои вариантом? Мне только нужно,чтобы отобразилась выбранная картинка,и не отобразился не подходящий файл.

Добавлено через 31 секунду
все ошибки уже на php реализованы, и их вывод на js мне не особо нужен

@terri · 30.04.2015, 20:29

paskalnikita, я сам не сильно знаком с js, но мне стало интересно ибо самому пригодится. Сейчас пытаюсь всё таки решить проблему

Добавлено через 20 минут
paskalnikita, пока что сделано так, чтобы только изображения загружались

HTML5
1
<input type="file" multiple="true"  accept="image/*" onchange="preview(this.value)"/>

@paskalnikita · 30.04.2015, 20:44 **[ТС]**

да, вариант неплох, да вот только, в правом нижнем углу окошка при выборе файла, стоит 'изображения', кликнув по выпадающему списку, кликаю на 'все файлы' и пытаюсь загрузить не картинку. Проблема все-таки частична решена

Добавлено через 9 минут
но по сути, вопрос решен, но, есть небольшая лазейка - некрасиво будет отображаться текст, вместо картинки при выборе в профиле

@terri · 30.04.2015, 21:02

paskalnikita, вопрос почти решён. Пару минут. Доделаю

Добавлено через 13 минут

HTML5
1
2
 <img id="previewImg" onchange="preview(this.value)" src="http://rubisrub.ru/images/users/193.jpg" alt="your avatar" width="250" height="250" ><br>
  <input type='file' accept="image/*" id="imgInp">

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    function onFileSelect(e) {
      var 
        f = e.target.files[0]; // Первый выбранный файл
        if(f.type.match(/image.*/)){
            var reader = new FileReader;
            place = document.getElementById("previewImg") // Сюда покажем картинку
          ;
          reader.readAsDataURL(f);
          reader.onload = function(e) { // Как только картинка загрузится
            place.src = e.target.result;
          }
        }
        else {
                alert('Это не картинка');
            };
    };
    if(window.File && window.FileReader && window.FileList && window.Blob) {
      document.querySelector("input[type=file]").addEventListener("change", onFileSelect, false);
    } else {
      console.warn( "Ваш браузер не поддерживает FileAPI")
    };

Новые блоги и статьи Все статьи Все блоги /
Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: показать затраченные материалы за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В качестве. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.

Отображение загружаемой, но еще не загруженной картинки профиля

Решение

Решение

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	30.04.2015, 16:31 [ТС]
	но что-то не отображается картинка после ее выбора 0

@terri 8 / 8 / 4 Регистрация: 12.05.2014 Сообщений: 233
	30.04.2015, 16:57
	paskalnikita, изменили ID элемента, куда будет показана картинка? У меня это previewImg (<img id="previewImg" />) Только что проверил на чистом html файле. Всё работает прекрасно 0

@terri 8 / 8 / 4 Регистрация: 12.05.2014 Сообщений: 233
	30.04.2015, 17:23
	paskalnikita, Да-да, забыл сказать. Я всегда пишу js в самом конце документа. Думал, что все так пишут и не сказал 0

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	30.04.2015, 17:29 [ТС]
	но вот только один момент: если файл выбираю не картинку, то хочу, дабы превью пуcтого не было, чтобы картинка просто не поменялась, понимаете? Можно ли как-то это реализоать? 0

@terri 8 / 8 / 4 Регистрация: 12.05.2014 Сообщений: 233
	30.04.2015, 18:00
	paskalnikita, да, можно. Нужно проверку делать на тип файла. Или же изначально задавать тип файла, который можно выбрать(jpeg,png ect). Есть множество примеров кода, которые позволяют это делать. И на php, и на ajax Например, можно тут посмотреть тык пример php Вытащить кусочки кода и будет нормально 0

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	30.04.2015, 18:16 [ТС]
	Не, в самом php у меня есть проверка на тип файла, но с js я не знаком(не учил),логично, что и с ajax тоже. Может, подбросите еще какое решение(раз там js и ajax \)? 0

@terri 8 / 8 / 4 Регистрация: 12.05.2014 Сообщений: 233
	30.04.2015, 18:36
	paskalnikita, тык Этот пример может вам 100% помочь. Тут сразу идет превьюшка + проверка на тип файла. Демо просмотрите 1

@terri 8 / 8 / 4 Регистрация: 12.05.2014 Сообщений: 233
	30.04.2015, 18:56
	paskalnikita, какие ошибки в консоли? <script type="text/javascript" src="js/ajaxupload.3.5.js"></script> подключили? function(file, ext) - посмотрите в примере php, что это за переменные 0

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	30.04.2015, 18:59 [ТС]
	SyntaxError: function statement requires a name settings: ReferenceError: preview is not defined 0

@terri 8 / 8 / 4 Регистрация: 12.05.2014 Сообщений: 233
	30.04.2015, 19:02
	paskalnikita, подставьте свои переменные из php кода идентично примеру. Или же возьмите код с примера, измените классы/id на своё и будет работать 1

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	30.04.2015, 19:10 [ТС]
	блин, ну торможу там, может подбросите какое решение, с мои вариантом? Мне только нужно,чтобы отобразилась выбранная картинка,и не отобразился не подходящий файл. Добавлено через 31 секунду все ошибки уже на php реализованы, и их вывод на js мне не особо нужен 0

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	30.04.2015, 20:44 [ТС]
	да, вариант неплох, да вот только, в правом нижнем углу окошка при выборе файла, стоит 'изображения', кликнув по выпадающему списку, кликаю на 'все файлы' и пытаюсь загрузить не картинку. Проблема все-таки частична решена Добавлено через 9 минут но по сути, вопрос решен, но, есть небольшая лазейка - некрасиво будет отображаться текст, вместо картинки при выборе в профиле 0