При загрузке изображения в БД через поле file вместо обычного пути выводится C:fakepathmail.png. При этом изображение не выводится. В интернете нашел, что это сделано для безопасности. Можно как-то решить эту проблему или есть какие-то альтернативные пути хранения изображения ? (изображения нужны для аватарки пользователя)
-
В чём конкретно заключается ваша проблема? Чем вам мешает фейковый путь?– Алексей Уколов6 авг 2016 в 8:10
-
Изображение не выводится.– Андрей6 авг 2016 в 8:14
-
Не выводится куда? Приложите код и подробно опишите задачу - сейчас на ваш вопрос невозможно ответить.– Алексей Уколов6 авг 2016 в 9:02
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' />
-
-
@Андрей, да, точно так же. Почитайте документацию, чтобы понимать что можно сделать (а можно сделать очень многое).– user2076187 авг 2016 в 10:55
-
-
@Андрей, пожалуйста, примите ответ (галочка под ответом).– user2076187 авг 2016 в 16:03
Включив 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>
-
Не, я имел в виду чтобы добавлять картинку в бд и потом выводить её у каждого пользователя как аватар.– Андрей7 авг 2016 в 10:26
-
Не вижу связи между fakepath и аватарами пользователя. Опишите задачу подробнее. 8 авг 2016 в 18:04
-
Ну пользователь при регистрации выбирает изображение через file. Это изображение добавляется в бд вместе с логином и паролем пользователя. И когда пользователь авторизируется на сайте, то это изображение из бд выводится как небольшая аватарка. И так у каждого пользователя в бд в поле image своё изображение, которое выводится в зависимости от того, какой пользователь зашел.– Андрей9 авг 2016 в 7:53
-
Вот хоть убей не пойму какая связь между полем input type='file' и выводом картинки из БД. Правильный ответ - никакой связи нет. Либо вы не понимаете схему работы, либо объяснить не можете правильно чего хотите, либо я тормоз (в последнем сомневаюсь). 9 авг 2016 в 16:42