[JSON & HTML] Afbeelding uploaden en weergeven

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior Backend developer - Automotive

We are looking for a highly motivated and experienced Backend developer. Required Qualifications: ● 6+ years experience with a server-side programming technology ● Experience with SQL Databases ● Experience with Go(lang) ● Experience with GCP ● Hands-on test-driven development (TDD), data analytics, and SQL experience ● Experience in producing REST and RPC based services ● Experience building secure and highly-available distributed systems/microservices ● Experience with Git-based versioning and Git workflows ● Knowledge of Redis, Docker, Setting up CI/CD pipelines and Unix command line ● Knowledge of Jira and Scrum techniques ● Excellent communication skills ● Must be a self-starter with

Bekijk vacature »

Louis Deconinck

Louis Deconinck

30/04/2017 18:50:53
Quote Anchor link
Ik ben bezig aan volgende website http://crasharenaturbostars.com/designs/ Het is de bedoeling dat mensen een screenshot uploaden en dat deze dan vervolgens weergegeven wordt.

Gezien ik niet zoveel bandbreedte heb op mijn hosting wil ik voor de hosting van de screenshots een externe hoster gebruiken. Hiervoor gebruik ik uploads.im (http://uploads.im/apidocs)

Op mijn site heb ik volgende code staan:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<form method="POST" action="http://uploads.im/api?upload&resize_width=350" enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="submit" value="Upload" name="submit">
</form>


Wanneer ik een afbeelding upload krijg ik volgende json terug:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
{"status_code":200,"status_txt":"OK","data":{"img_name":"FhXqn.jpg","img_url":"http:\/\/sk.uploads.im\/FhXqn.jpg","img_view":"http:\/\/uploads.im\/FhXqn.jpg","img_width":"350","img_height":233,"img_attr":"width=\"350\" height=\"233\"","img_size":"29.3 KB","img_bytes":30051,"thumb_url":"http:\/\/sk.uploads.im\/t\/FhXqn.jpg","thumb_width":360,"thumb_height":240,"source":"base64 image string","resized":"1","delete_key":"2c8b42a2daa7436b"}}


Hoe kan ik de afbeeldignsurl uit deze json halen (zodat ik hem in mijn mysql database kan stoppen) en hoe zorg ik er voor dat de bezoeker de json niet te zien krijgt?
Gewijzigd op 30/04/2017 18:51:48 door Louis Deconinck
 
PHP hulp

PHP hulp

20/09/2021 01:13:51
 
- Ariën -
Beheerder

- Ariën -

30/04/2017 19:01:11
Quote Anchor link
Die aanroep moet je in je PHP-script verwerken, en bijv. met file_get_contents aanroepen. Ik denk zelf dat je de afbeelding tijdelijk even moet cachen op je eigen server, zodat de externe partij het zelf over kan nemen.

Deze uitput haal je door json_decode. Dan heb je in img_url de URL van je afbeelding die je in je MySQL-database kan verwerken.
Gewijzigd op 30/04/2017 19:03:49 door - Ariën -
 
Louis Deconinck

Louis Deconinck

30/04/2017 19:03:40
Quote Anchor link
- Ariën - op 30/04/2017 19:01:11:
Heb je al de output al eens door json_decode gehaald? Dan heb je in img_url de URL van je afbeelding die je in je MySQL-database kan verwerken.


Dat had ik inderdaad al door. Alleen, hoe doe ik dat en hoe voorkom ik dat de bezoeker de JSON ook te zien krijgt bij het uploaden van een afbeelding?
 
- Ariën -
Beheerder

- Ariën -

30/04/2017 19:04:25
Quote Anchor link
Door die URL onder-water aan te roepen. Zie mijn edit.
De gebruiker heeft niks aan die JSON-informatie, en vooral niet omdat er een delete-key wordt meegestuurd.
Gewijzigd op 30/04/2017 19:05:18 door - Ariën -
 
Louis Deconinck

Louis Deconinck

30/04/2017 19:04:29
Quote Anchor link
- Ariën - op 30/04/2017 19:01:11:
Die aanroep moet je in je PHP-script verwerken, en bijv. met file_get_contents aanroepen. Ik denk zelf dat je de afbeelding tijdelijk even moet cachen op je eigen server, zodat de externe partij het zelf over kan nemen.

Dank je wel voor de respons. Hoe doe ik dat die afbeelding cachen?


Toevoeging op 30/04/2017 19:05:38:

- Ariën - op 30/04/2017 19:04:25:
Door die URL onder-water aan te roepen. Zie mijn edit.

Het probleem is dat de url niet werkt als er niets wordt geupload

http://uploads.im/api?upload&resize_width=350 geeft dan gewoon volgende JSON
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
{"status_code":403,"status_txt":"bad request"}


Toevoeging op 30/04/2017 19:06:25:

- Ariën - op 30/04/2017 19:04:25:
De gebruiker heeft niks aan die JSON-informatie, en vooral niet omdat er een delete-key wordt meegestuurd.


Dat snap ik, maar ik zou de gebruiker graag op mijn website houden en niet doorsturen naar de JSON pagina van uploads.im hoe doe ik dat?
Gewijzigd op 30/04/2017 19:06:52 door Louis Deconinck
 
- Ariën -
Beheerder

- Ariën -

30/04/2017 19:20:51
Quote Anchor link
Kijk eens naar deze URL:
http://php.net/manual/en/features.file-upload.php

Eerst lijkt het mij logisch dat je de afbeelding zelf tijdelijk gaat opslaan. En dan doe je onder-water een POST-request naar upload.im.

Zoiets zal het dan wel worden (ongetest!):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
$url
= 'http://uploads.im/api?upload&resize_width=350';
$data = array('iets' => 'dit', 'nogwat' => 'dat'); // check de API-documentatie over welke data er gevraagd wordt.

$options = array(
    'http' => array(
        'header'  => "Content-type: application/x-www-form-urlencoded\r\nEnctype:multipart/form-data",
        'method'  => 'POST',
        'content' => http_build_query($data)
    )
);

$context  = stream_context_create($options);
$result = file_get_contents($url, false, $context);
if ($result === FALSE) {
    // error!
} else {
    // gelukt
}

// kijken wat er gebeurt.
var_dump($result);
?>
 
Louis Deconinck

Louis Deconinck

30/04/2017 19:33:48
Quote Anchor link
- Ariën - op 30/04/2017 19:20:51:
Kijk eens naar deze URL:
http://php.net/manual/en/features.file-upload.php

Eerst lijkt het mij logisch dat je de afbeelding zelf tijdelijk gaat opslaan. En dan doe je onder-water een POST-request naar upload.im.

Zoiets zal het dan wel worden (ongetest!):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
$url
= 'http://uploads.im/api?upload&resize_width=350';
$data = array('iets' => 'dit', 'nogwat' => 'dat'); // check de API-documentatie over welke data er gevraagd wordt.

$options = array(
    'http' => array(
        'header'  => "Content-type: application/x-www-form-urlencoded\r\nEnctype:multipart/form-data",
        'method'  => 'POST',
        'content' => http_build_query($data)
    )
);

$context  = stream_context_create($options);
$result = file_get_contents($url, false, $context);
if ($result === FALSE) {
    // error!
} else {
    // gelukt
}

// kijken wat er gebeurt.
var_dump($result);
?>


Dank je we, hier kan ik al wat mee.
Denk echter niet dat dit zal werken aangezien je geen url meegeeft aan de upload variabele in de url.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$url = 'http://uploads.im/api?upload&resize_width=350';

moet zoiets worden
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$url = 'http://uploads.im/api?upload=http://afbeeldingsurl.com&resize_width=350';

Of zie ik dat verkeerd?

Ik snap ook niet echt welke data ik zou moeten meegeven in de array.

Ik had zelf het voglende al bekomen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<?php
$imgdata
= json_decode($response, true);
echo $imgdata["data"]["img_url"];
?>

maar dan moet ik op een of andere manier natuurlijk wel aan die $response komen en ik heb geen idee hoe dit te doen ...
Gewijzigd op 30/04/2017 19:35:26 door Louis Deconinck
 
- Ariën -
Beheerder

- Ariën -

30/04/2017 19:38:50
Quote Anchor link
Je moet inderdaad de URL van je foto gebruiken, maar het is netter om de URL netjes op te bouwen met http_build_query.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
$url
= 'http://uploads.im/api';
$data = array('upload' => $file_path, 'resize_width' => '350');
/* hier de rest */
?>

$file_path moet je zelf even vullen met de locatie waar je jouw bestand na uploaden tijdelijk hebt opgeslagen op je server.
Gewijzigd op 30/04/2017 19:40:06 door - Ariën -
 
Louis Deconinck

Louis Deconinck

30/04/2017 19:42:08
Quote Anchor link
- Ariën - op 30/04/2017 19:38:50:
Je moet inderdaad de URL van je foto gebruiken, maar het is netter om de URL netjes op te bouwen met http_build_query.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
$url
= 'http://uploads.im/api';
$data = array('upload' => $file_path, 'resize_width' => '350');
/* hier de rest */
?>

$file_path moet je zelf even vullen met de locatie waar je jouw bestand na uploaden tijdelijk hebt opgeslagen op je server.


Dank je wel, ik denk dat het zal lukken :)
Alleen, hoe doe ik dat tijdelijk opslaan van die afbeelding? Ik kan een afbeelding wel uploaden maar hoe verwijder ik die dan ook weer? Op die link die je me stuurde vind ik niet zo veel relevante info ...
 
- Ariën -
Beheerder

- Ariën -

30/04/2017 19:46:49
Quote Anchor link
unlink
Uiteraard nadat alles bij Uploads.im gelukt is (status_txt == "OK")
 
Louis Deconinck

Louis Deconinck

30/04/2017 20:47:43
Quote Anchor link
- Ariën - op 30/04/2017 19:46:49:
unlink
Uiteraard nadat alles bij Uploads.im gelukt is (status_txt == "OK")


Ben al heel wat verder geraakt. Het uploaden van een afbeelding lukt, het binnenkrijgen van de JSON echter niet.

Dit zijn de var dumps die ik krijg bij het uploaden van profiel.png

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
File is an image - image/png.The file profiel.png has been uploaded.string(46) "{"status_code":403,"status_txt":"bad request"}"


Dit is al mijn code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<?php

ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);

$conn = new mysqli('localhost', '', '', '');

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    }
else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}

// Check file size
if ($_FILES["fileToUpload"]["size"] > 10000000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}

// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg") {
    echo "Sorry, only JPG, JPEG & PNG files are allowed.";
    $uploadOk = 0;
}

// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    }
else {
        echo "Sorry, there was an error uploading your file.";
    }
}


$file_path = 'http://crasharenaturbostars.com/designs/uploads/'. basename($_FILES["fileToUpload"]["name"]).'.'.$imageFileType;
$url = 'http://uploads.im/api?upload='. $file_path. '&resize_width=350';
$data = array('upload' => $file_path, 'resize_width' => '350');

$options = array(
    'http' => array(
        'header'  => "Content-type: application/x-www-form-urlencoded\r\nEnctype:multipart/form-data",
        'method'  => 'POST',
        'content' => http_build_query($data)
    )
);


$context  = stream_context_create($options);
$result = file_get_contents($url, false, $context);
if ($result === FALSE) {
    // error!
} else {
    // gelukt
}

// kijken wat er gebeurt.
var_dump($result);
echo "s";

}


?>


<?php include($_SERVER['DOCUMENT_ROOT'].'/header.php'); ?>
<h2>Designs</h2>

<?php

$sql2
= "SELECT image FROM designs";
if($result2 = $conn->query($sql2)) {

while($row = mysqli_fetch_assoc($result2)) {

?>

<img src="<?php echo $row["image"]; ?>" width="350" class="designimage">
<?php
}
}

?>


<div id="upload">
<br/>
<b>Upload</b><br/>

<form method="POST" action="" enctype="multipart/form-data">
Make a screenshot from your design in edit mode and upload it here.<br/>
    <input type="file" name="fileToUpload" id="fileToUpload" /><br/><br/>
    <input type="submit" value="Upload design" name="submit" class="button">
</form>


</div>
<?php include($_SERVER['DOCUMENT_ROOT'].'/footer.php');?>


Toevoeging op 30/04/2017 20:48:51:

Heb $url gecheckt en deze klopt zeker.

Toevoeging op 30/04/2017 21:01:01:

Het voglende bleek wel te werken, dit geeft me de json :)

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
$str
= file_get_contents($url);
$json = json_decode($str, true);
echo '<pre>' . print_r($json, true) . '</pre>';
?>
Gewijzigd op 30/04/2017 20:52:39 door Louis Deconinck
 
- Ariën -
Beheerder

- Ariën -

30/04/2017 21:53:25
Quote Anchor link
Ik raad je aan om even je code netjes in te springen. Als ik accolades op een rechte lijn zie dan krijg ik altijd de bibbers.

Kijk ook eens op lijn 66 en 68. Hier moet je wel de juiste dingen doen, zoals $result gebruiken als deze true is.
Gewijzigd op 30/04/2017 21:55:57 door - Ariën -
 
Louis Deconinck

Louis Deconinck

30/04/2017 22:43:40
Quote Anchor link
- Ariën - op 30/04/2017 21:53:25:
Ik raad je aan om even je code netjes in te springen. Als ik accolades op een rechte lijn zie dan krijg ik altijd de bibbers.

Kijk ook eens op lijn 66 en 68. Hier moet je wel de juiste dingen doen, zoals $result gebruiken als deze true is.


De code die ik nu gebruik werkt naar behoren en doe wat ik verwacht.
Ik ben echter nog maar een beginneling op vlak van programmeren en wou dan ook even vragen of bepaalde stukken van mijn code verbeterd kunnen worden?

Alle code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<?php

// Debugging
ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);

// Connection with database
$conn = new mysqli('localhost', '', '', '');

// Executes only when the form was send
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  $target_dir = "uploads/";
  $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
  $uploadOk = 1;
  $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
  // Check if image file is a actual image or fake image
  if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
      echo "File is an image - " . $check["mime"] . ".";
      $uploadOk = 1;
    }
else {
      echo "File is not an image.";
      $uploadOk = 0;
    }
  }

  // Check if file already exists
  if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
  }

  // Check file size
  if ($_FILES["fileToUpload"]["size"] > 10000000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
  }

  // Allow certain file formats
  if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg") {
    echo "Sorry, only JPG, JPEG & PNG files are allowed.";
    $uploadOk = 0;
  }

  // Check if $uploadOk is set to 0 by an error
  if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
  // If everything is ok, try to upload file
  } else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
      echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    }
else {
      echo "Sorry, there was an error uploading your file.";
    }
  }


  // Establishing file path and api url
  $file_path = 'http://crasharenaturbostars.com/designs/uploads/'. basename($_FILES["fileToUpload"]["name"]);
  $url = 'http://uploads.im/api?upload='. $file_path. '&resize_width=350';

  // Getting the image url out of the JSON
  $str = file_get_contents($url);
  $json = json_decode($str, true);
  $imageurl = $json['data']['img_url'];

  // Putting the image url in the database
  $sql1 = "INSERT INTO designs (image) VALUES ('$imageurl')";
  $result1 = mysqli_query($conn,$sql1);

  // Deleting temorary image file
  if ($json['status_txt'] == "OK") {
    unlink($_SERVER['DOCUMENT_ROOT'].'/designs/uploads/'. basename($_FILES["fileToUpload"]["name"]));
  }
}


?>


<!-- Including header -->
<?php include($_SERVER['DOCUMENT_ROOT'].'/header.php'); ?>
<h2>Designs</h2>

<?php

$sql2
= "SELECT image FROM designs";
if($result2 = $conn->query($sql2)) {
  // Looping through all images in database
  while($row = mysqli_fetch_assoc($result2)) {

    ?>

    <img src="<?php echo $row["image"]; ?>" width="350" class="designimage">
    <?php
  }
}

?>


<div id="upload">
  <br/>
  <b>Upload</b><br/>
  <!-- Form to upload design -->
  <form method="POST" action="" enctype="multipart/form-data">
    Make a screenshot from your design in edit mode and upload it here.<br/>
    <input type="file" name="fileToUpload" id="fileToUpload" /><br/><br/>
    <input type="submit" value="Upload design" name="submit" class="button">
  </form>
</div>
<!-- Including footer -->
<?php include($_SERVER['DOCUMENT_ROOT'].'/footer.php');?>
 
Frank Nietbelangrijk

Frank Nietbelangrijk

01/05/2017 00:37:54
Quote Anchor link
>> De code die ik nu gebruik werkt naar behoren en doe wat ik verwacht.

Code die voor de machine klopt als een bus en draait als een zonnetje kan voor mensen TOTAAL onleesbaar zijn. Zolang het werkt en het niet veranderd hoeft te worden is er dan nog niets aan de hand maar we weten zo onderhand wel dat code van tijd tot tijd aangepast dient te worden dus is het heel erg belangrijk om de code duidelijk leesbaar te maken en te voorzien van de broodnodige commentaar regels.
Een goede editor helpt je daarbij overigens.
 
Thomas van den Heuvel

Thomas van den Heuvel

01/05/2017 00:41:37
Quote Anchor link
Als je een JSON respons terugkrijgt, kun je dan niet gewoon opnieuw een AJAX post doen naar een PHP-script?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

01/05/2017 00:45:47
Quote Anchor link
Verbeteringen zijn er zeker mogelijk. Te veel om zo even op te noemen waarschijnlijk. Maar laten we een onderwerp pakken: Wat doen die echos midden in je applicatie?

Ik neem even aan dat in header.php de <html> tag staat? dan komen die foutmeldingen zoals "Sorry, your file was not uploaded." dus niet tussen de <html> en </html> tag te staan.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.