2

При загрузке изображения в БД через поле file вместо обычного пути выводится C:fakepathmail.png. При этом изображение не выводится. В интернете нашел, что это сделано для безопасности. Можно как-то решить эту проблему или есть какие-то альтернативные пути хранения изображения ? (изображения нужны для аватарки пользователя)

3
  • В чём конкретно заключается ваша проблема? Чем вам мешает фейковый путь? 6 авг 2016 в 8:10
  • Изображение не выводится. 6 авг 2016 в 8:14
  • Не выводится куда? Приложите код и подробно опишите задачу - сейчас на ваш вопрос невозможно ответить. 6 авг 2016 в 9:02

2 ответа 2

2

Такой путь по соображениям безопасности сделан: C:fakepath.
Получить реальный путь нельзя, разве что через 0-day браузера...


Вывести выбранное изображение можно и без пути, который, кстати, бесполезен, ведь доступа к ФС клиента у JS нет и слава Богу.

Предпросмотр картинки можно сделать так:

document.addEventListener('DOMContentLoaded', e => {
  let file = document.querySelector('#file'),        // Выбираем нужные
      preview = document.querySelector('#preview');  // элементы
  
  file.addEventListener('change', e => { // При изменении input
    if(file.files.length === 0) // Если ничего не выбрано - выходим
      return;
    
    let f = file.files[0],     // Берём первый файл
        fr = new FileReader(); // Создаём объект чтения файлов
    
    // В свойсте type mime (что-то типа image/png)
    if(f.type.indexOf('image') === -1) // Если файл не является изображением - выходим
      return;
    
    fr.onload = e => {
      if(getComputedStyle(preview, null).display === 'none') // Если нужно - показываем img
        preview.style.display = 'block';
      
      preview.src = e.target.result; // В src будет что-то типа data:image/jpeg;base64,....
    }
    fr.readAsDataURL(f); // Читаем blob выбранного файла
  });
});
#preview{
  display: none;
}
<input type='file' id='file' /><br /><br />
<img src='' id='preview' />

4
  • С предпросмотром понятно. А просто вывод ? Тоже самое я так понимаю ? 7 авг 2016 в 10:19
  • @Андрей, да, точно так же. Почитайте документацию, чтобы понимать что можно сделать (а можно сделать очень многое).
    – user207618
    7 авг 2016 в 10:55
  • Я понял, всем спасибо за ответы. Буду разбираться. 7 авг 2016 в 14:23
  • @Андрей, пожалуйста, примите ответ (галочка под ответом).
    – user207618
    7 авг 2016 в 16:03
1

Включив telepat_mode я думаю, что вам нужно предпросмотр картинок сделать при загрузке. Я прав? Тогда рисуйте на canvas выбранный файл.

И если я правильно понял, то вот вам рабочий пример:

$(document).on('ready', function(){
  function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#image').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }
  }

  $("#imgInput").change(function(){
    readURL(this);
  });
});
.input-file-row-1:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.input-file-row-1{
    display: inline-block;
	margin-top: 25px;
	position: relative;
}

html[xmlns] .input-file-row-1{
    display: block;
}

* html .input-file-row-1 {
    height: 1%;
}

.upload-file-container { 
	position: relative; 
	width: 100px; 
	height: 137px; 
	overflow: hidden;	
	background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat;
	float: left;
	margin-left: 23px;
} 

.upload-file-container:first-child { 
	margin-left: 0;
} 

.upload-file-container > img {
	width: 93px;
	height: 93px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.upload-file-container-text{
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: #719d2b;
	line-height: 17px;
	text-align: center;
	display: block;
	position: absolute; 
	left: 0; 
	bottom: 0; 
	width: 100px; 
	height: 35px;
}

.upload-file-container-text > span{
	border-bottom: 1px solid #719d2b;
	cursor: pointer;
}

.upload-file-container input  { 
	position: absolute; 
	left: 0; 
	bottom: 0; 
	font-size: 1px; 
	opacity: 0;
	filter: alpha(opacity=0);	
	margin: 0; 
	padding: 0; 
	border: none; 
	width: 70px; 
	height: 50px; 
	cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="" method="post" action="#" enctype="multipart/form-data" class="feedback-form-1">
				<fieldset>
										
					<div class="input-file-row-1">
					
						<div class="upload-file-container">
							<img id="image" src="#" alt="" />						
							<div class="upload-file-container-text">
								<span>Add<br />photo</span>
								<input type="file" name="pic[]" class="photo" id="imgInput" />
							</div>
						</div>				
										
					</div>			
				</fieldset>
			</form>

4
  • Не, я имел в виду чтобы добавлять картинку в бд и потом выводить её у каждого пользователя как аватар. 7 авг 2016 в 10:26
  • Не вижу связи между fakepath и аватарами пользователя. Опишите задачу подробнее. 8 авг 2016 в 18:04
  • Ну пользователь при регистрации выбирает изображение через file. Это изображение добавляется в бд вместе с логином и паролем пользователя. И когда пользователь авторизируется на сайте, то это изображение из бд выводится как небольшая аватарка. И так у каждого пользователя в бд в поле image своё изображение, которое выводится в зависимости от того, какой пользователь зашел. 9 авг 2016 в 7:53
  • Вот хоть убей не пойму какая связь между полем input type='file' и выводом картинки из БД. Правильный ответ - никакой связи нет. Либо вы не понимаете схему работы, либо объяснить не можете правильно чего хотите, либо я тормоз (в последнем сомневаюсь). 9 авг 2016 в 16:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.