When an image is loaded into the database, the file C: fakepathmail.png is displayed instead of the usual path through the file field. At the same time the image is not displayed. On the internet I found it made for security. Can I somehow solve this problem or are there any alternative ways to store the image? (images are needed for user avatars)

  • What exactly is your problem? What prevents you fake way? - Alexey Ukolov
  • The image is not displayed. - Andrey
  • Does not display where? Attach the code and describe the task in detail - now it is impossible to answer your question. - Alexey Ukolov

2 answers 2

This path is made for security reasons: C:fakepath .
You cannot get a real path, except through a 0-day browser ...

You can display the selected image without a path, which, by the way, is useless, because JS does not have client access to the client file and thank God.

Previewing pictures can be done like this:

 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' />

  • The preview is understandable. And just a conclusion? The same thing I understand? - Andrei
  • @ Andrei, yes, exactly the same. Read the documentation to understand what you can do (and you can do a lot). - user207618
  • I understand, all thanks for the answers. I will sort this out. - Andrei
  • @Andrey, please accept the answer (check mark under the answer). - user207618

Turning on telepat_mode, I think you need to preview the pictures when loading. I'm right? Then draw the selected file on canvas.

And if I understood correctly, here is a working example for you:

 $(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>

  • No, I meant to add a picture in the database and then display it for each user as an avatar. - Andrey
  • I do not see the connection between fakepath and user avatars. Describe the task in more detail. - yarkov_aleksei
  • Well, the user during registration selects the image via file. This image is added to the database along with the username and password. And when a user logs into the site, this image from the database is displayed as a small avatar. And so each user in the database in the image field has its own image, which is displayed depending on which user has logged in. - Andrei
  • Here at least kill me I do not understand what is the relationship between the input type = 'file' field and the output of the image from the database. The correct answer is no connection. Either you do not understand the scheme of work, or you cannot explain what you want correctly, or I have a brake (I doubt the latter). - yarkov_aleksei