how to save an input image in a database with a longblob column?

Question

I have a file type input. I want the photo that is inserted in the input to be sent to the db and saved. I wrote some code that according to logic should work. but I do not know why it does not work. where am I wrong? the column photo is a longblob type

html

     <label for="">img</label>
     <input type="file"  id="immagine" >

javascript

     function values(a){
      if (a.length>1){
       var img;
       const fr = new FileReader();
       fr.onload = () => {
        // It worked
         img = fr.result;

           var params= "V1="+a[2]+"& V2="+a[3]+"& V3="+a[4]+"& V4="+a[5]+"& V5="+a[6]+"& V6="+a[7]+"& V7="+a[8]+"& V8="+a[9]+"& V9="+a[10]+"& V10="+a[11]+"& V11="+a[12]+"& V12="+a[13]+"& V13="+a[14]+"& V14="+a[15]+"& img="+img;

           var xhttp = new XMLHttpRequest();
           xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

            }
           };
           xhttp.open("POST", "./server/AggiuntaBhk.php", true);
           xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send( params);

        // ...use the array here...

           };
           fr.onerror = () => {
              // The read failed, handle/report it
                document.getElementById("a").innerHTML= "noo";
                                    };
          fr.readAsBinaryString(document.getElementById('immagine').files[0]);
}
}

php

     include("../../connessione_db/db_con.php"); // Include il file di connessione al database
     session_start();

     $v1=$_REQUEST["V1"];
     $v2=$_REQUEST["V2"];
     $v3=$_REQUEST["V3"]; 
     $v4=$_REQUEST["V4"];
     $v5=$_REQUEST["V5"];
     $v6=$_REQUEST["V6"];
     $v7=$_REQUEST["V7"];
     $v8=$_REQUEST["V8"];
     $v9=$_REQUEST["V9"];
     $v10=$_REQUEST["V10"];
     $v11=$_REQUEST["V11"];
     $v12=$_REQUEST["V12"];
     $v13=$_REQUEST["V13"];
     $v14=$_REQUEST["V14"];
     $foto=$_REQUEST["img"];
     $queryInput="INSERT INTO bhk (Metrica1,Metrica2,Metrica3,Metrica4,Metrica5,Metrica6,Metrica7,Metrica8,Metrica9,Metrica10,Metrica11,Metrica12,Metrica13,Data,Puntoz,Paziente,Foto) VALUES ('$v1','$v2','$v3','$v4','$v5','$v6','$v7','$v8','$v9','$v10','$v11','$v12','$v13','2014-01-01','$v14','BVNVCN97L18C983O','$foto')";

     $queryI = mysqli_query($connessione_al_server,$queryInput);

after query to display

              <?php
                echo '<img id="imgcaricata" class="mySlides" 
                 src="data:image/jpeg;base64,'.base64_encode( $foto["Foto"] 
                   ).'"
                 style="height:auto; width:auto;max-width:500px; margin-top:55px;" />';
                 ?>

I also tried with until8Array and FileReader.readAsArrayBuffer() in the db I have the correct file but does not display anything. I can only see the image if I insert the image directly in the db using the browse option. am I wrong to store or display?

Ritesh Khandekar · Accepted Answer · 2019-09-07T11:00:08.577

0

First read file by JavaScript:

var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("immagine").files[0]);
oFReader.onload = function (oFREvent) {
    imgdata = oFREvent.target.result;
};

Add imgdata in params:

var params = "img=" + encodeURIComponent(imgdata);

Send it to server:

xhttp.send(params);

After query to display:

<?php
echo '<img id="imgcaricata" class="mySlides" src="'.$foto["Foto"].'" style="height:auto; width:auto;max-width:500px; margin-top:55px;"/>';
?>

edited Sep 07 '19 at 11:00

answered Sep 07 '19 at 04:59

Ritesh Khandekar

3,885
3
15
30

imgdata out of oFEvent{} is undefined – cata Sep 07 '19 at 08:18
now I can save the image to the db like this: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAHgAeAAD/4QBoRXhpZgAATU0AKgAAAAgABAEaAAUAAAABA ..... but after the query I have this error if I try to display:"GET data:image/jpeg;base64,9j/4AAQSkZJRgABAQEAHgAeAAD/4QBoRXhpZgAATU...net::ERR_INVALID_URL – cata Sep 07 '19 at 08:29
Yes this will also increase your `.php` file's size, That's why it is better to use `move_uploaded_file()`. `net::ERR_INVALID_URL`:You got this error because your URL size is too large.(depends upon your image size) – Ritesh Khandekar Sep 07 '19 at 09:42
Don't you understand how I'm supposed to do this? – cata Sep 07 '19 at 10:10
the rest stays the same? just add that line of code to the javascript? – cata Sep 07 '19 at 10:56
the photo is displayed on another page – cata Sep 07 '19 at 10:59
Ok I edited my answer, try with `encodeURIComponent(imgdata)` – Ritesh Khandekar Sep 07 '19 at 11:01

how to save an input image in a database with a longblob column?

html

javascript

php

after query to display

1 Answers1