Как получить реальный адрес файла?

@maxapet · Регистрация: 08.02.2016

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

Есть php-страница, на которой есть форма с полем для загрузки картинки

HTML5
1
<input type="file" src="" />

Есть картинка на этой же странице.
Хотелось бы сделать предпросмотр картинки сразу же, как только пользователь выберет файл. Для получения адреса выбранного файла вешаю обработчик на событие onchanhge. Но получается, что путь к файлу имеет такой вид: c:\\fakepath\имя_файла.расширение_файла. Т.е. нет реального пути к файлу. Можно ли как-то его получить?

P.S. После загрузки файла на сервер всё получается, но хотелось бы просмотреть файл до загрузки. Можно ли это как-то сделать?

@pav1uxa · 31.07.2016, 16:45

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

Как получить реальный адрес файла??

Реальный адрес чего? Файла на компьютере у посетителя сайта? Никак.

@53ifbb · 31.07.2016, 16:49

Сразу загрузка в некую папку temp и получение через ajax. При сохранении, просто перемещаем его при отмене/закрытии окна он остается в темп и когда нибудь удаляется, например через cron

@maxapet · 31.07.2016, 16:52 **[ТС]**

Спасибо, понял.

Добавлено через 42 секунды
Спасибо за идею - это то, что мне нужно было!

@WhiteMind · 31.07.2016, 17:10

Сообщение от 53ifbb

Сразу загрузка в некую папку temp и получение через ajax. При сохранении, просто перемещаем его при отмене/закрытии окна он остается в темп и когда нибудь удаляется, например через cron

2016 год на дворе. html 5 и все такое...
например
https://jsfiddle.net/0rumd9hs/

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function() {
    $(document).on('change', '[type=file]', function(e) {
    var files = e.target.files
    if ( files.length ) {
        $('.add-img').html('');
        for(var i in files) {
        var file = files[i];
        var reader = new FileReader();
                reader.onload = function(e) {
            $('.add-img').append(
            $('<img>').attr('src', e.target.result)
          );          
        }
        reader.readAsDataURL(file);
      }
    }
  })
})

HTML5
1
2
<input type='file' />
<div class="add-img"></div>

@maxapet · 01.08.2016, 04:30 **[ТС]**

Спасибо большое!

@maxapet · 02.08.2016, 09:16 **[ТС]**

А можно ли таким же способом задать значение для background-image? У меня не получилось. Пробовал вот так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
    $(document).on('change', '[type=file]', function(e) {
    var files = e.target.files
    if ( files.length ) {
        $('.add-img').html('');
        for(var i in files) {
        var file = files[i];
        var reader = new FileReader();
            reader.onload = function(e) {
            $('.add-img').css("background-image",  e.target.result)
          );          
        }
        reader.readAsDataURL(file);
      }
    }
  })
})

Не сработало

@WhiteMind · 02.08.2016, 11:57

https://jsfiddle.net/0rumd9hs/5/

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function() {
    $(document).on('change', '[type=file]', function(e) {
    var files = e.target.files
    if ( files.length ) {
        for(var i in files) {
        var file = files[i];
        var reader = new FileReader();
                reader.onload = function(e) {
            $('.bg-class').css('background-image', 'url('+e.target.result+')');        
        }
        reader.readAsDataURL(file);
      }
    }
  })
})

@maxapet · 02.08.2016, 12:26 **[ТС]**

Совершенно неочевидно для меня.

Действительно, так работает. Спасибо большое!

Добавлено через 7 минут
А можно ли таким способом, через FileReader, узнать размеры - ширину и высоту - рисунка?

@WhiteMind · 02.08.2016, 12:59

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

А можно ли таким способом, через FileReader, узнать размеры - ширину и высоту - рисунка?

все можно. хоть сделать ресайз и отправить измененное изображение на сервер

@maxapet · 02.08.2016, 15:23 **[ТС]**

А где можно почитать про это?

@WhiteMind · 02.08.2016, 21:23

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

А где можно почитать про это?

Ну конкретно на размер можно так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function() {
    $(document).on('change', '[type=file]', function(e) {
    var files = e.target.files
    if ( files.length ) {
        for(var i in files) {
        var file = files[i]; 
        if ( typeof file !== "object" ) { continue; }
        var reader = new FileReader();
                reader.onload = function(e) {   
            var img = new Image();
          img.src = e.target.result;
          img.onload = function() {
            alert( "Width: " + img.width + " Height: " + img.height )
            $('.bg-class').css('background-image', 'url('+e.target.result+')')
          }
        }
        reader.readAsDataURL(file);
      }
    }
  })
})

HTML5
1
2
3
4
5
6
7
8
9
10
<input type='file' />
<div class="bg-class">
  <h1>
  FON <br>
  FON <br>
  FON <br>
  FON <br>
  FON <br>
  </h1>
</div>

https://jsfiddle.net/0rumd9hs/6/

Добавлено через 12 секунд
очень неплохо про все это описано тут: https://habrahabr.ru/post/252175/

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

Как получить реальный адрес файла?

Решение

Решение

Решение

@53ifbb 55 / 55 / 21 Регистрация: 01.03.2016 Сообщений: 594
	31.07.2016, 16:49
	Сообщение было отмечено maxapet как решение Решение Сразу загрузка в некую папку temp и получение через ajax. При сохранении, просто перемещаем его при отмене/закрытии окна он остается в темп и когда нибудь удаляется, например через cron 1

@maxapet 0 / 0 / 0 Регистрация: 08.02.2016 Сообщений: 98
	31.07.2016, 16:52 [ТС]
	Спасибо, понял. Добавлено через 42 секунды Спасибо за идею - это то, что мне нужно было! 0

@maxapet 0 / 0 / 0 Регистрация: 08.02.2016 Сообщений: 98
	01.08.2016, 04:30 [ТС]
	Спасибо большое! 0

@maxapet 0 / 0 / 0 Регистрация: 08.02.2016 Сообщений: 98
	02.08.2016, 12:26 [ТС]
	Совершенно неочевидно для меня. Действительно, так работает. Спасибо большое! Добавлено через 7 минут А можно ли таким способом, через FileReader, узнать размеры - ширину и высоту - рисунка? 0

@maxapet 0 / 0 / 0 Регистрация: 08.02.2016 Сообщений: 98
	02.08.2016, 15:23 [ТС]
	А где можно почитать про это? 0