2 keer 1 foto pre-viewen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

John Brat

John Brat

06/03/2019 22:15:38
Quote Anchor link
Weet iemand hoe ik nu twee keer een foto kan pre-viewen waarbij de tweede niet over de eerste wordt geplaatst?
Ik heb dit gevonden, maar hierbij word elke keer de foto over elkaar geplaatst.

<script>
var loadFile = function(event) {
var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById("output");
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
</script>

<html>
<input type="file" name="foto1" accept="image/*" onchange="loadFile(event)">
<img src="" id="output" style="max-height:150px;"/>

<input type="file" name="foto2" accept="image/*" onchange="loadFile(event)">
<img src="" id="output" style="max-height:150px;"/>
</html>
 
PHP hulp

PHP hulp

19/03/2019 03:52:11
 
Thomas van den Heuvel

Thomas van den Heuvel

06/03/2019 23:10:30
Quote Anchor link
Een id-waarde dient uniek te zijn, dus bovenstaande HTML (2x id="output") klopt sowieso niet.
 
John Brat

John Brat

07/03/2019 07:07:31
Quote Anchor link
Klopt, maar als ik dit doe toont hij de foto ook twee keer op exact dezelfde plek.

<script>
var loadFile = function(event) {
var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById("output1");
var output = document.getElementById("output2");
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
</script>


<input type="file" name="foto1" accept="image/*" onchange="loadFile(event)">
<img src="" id="output1" style="max-height:150px;"/>

<input type="file" name="foto2" accept="image/*" onchange="loadFile(event)">
<img src="" id="output2" style="max-height:150px;"/>
 
Bart V B

Bart V B

07/03/2019 10:13:08
Quote Anchor link
Dat komt omdat je telkens id= overschrijft.
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
<!DOCTYPE html>
<html>
<head>
<title>Selecteer en laat zien script</title>

 
<style>
  .thumb {
    height: 200px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>

</head>
<body>

<h1>Hello World!</h1>
<p>Selecteer met muis en shift je foto's.</p>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

 </script>
</body>
</html>
Gewijzigd op 07/03/2019 10:15:12 door Bart V B
 
John Brat

John Brat

07/03/2019 15:14:01
Quote Anchor link
TOP! hartstikke bedankt. Javascript blijft toch nog lastig...
Nu wil ik de gekozen foto's nog als variabele gebruiken in PHP.
Wee je misschien ook hoe ik die uit dit script haal?
bvd

Toevoeging op 07/03/2019 20:06:29:

hoi, ik bedoel dat ik de bestandsnaam van de de ge-pre-viewde fotos wil gebruiken om op te slaan in een database. Daarom zou ik deze uit het javascript willen halen.
Hoe ik dat dan verder met php afhandel gaat me wel lukken.
Ik weet nu alleen niet als ik bijv 3 fotos pré-view, hoe ik die bestandsnamen kan 'echoen'.
Als ik daar uit ben, ben ik ontzettend geholpen.
bedankt alvast.
 
Bart V B

Bart V B

08/03/2019 10:56:13
Quote Anchor link
Ik zou dat gewoon in php afvangen.
Dus zoiets?
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
<!DOCTYPE html>
<html>
<head>
<title>Jquery selecteer en laat zien script</title>


 
<style>
  .thumb {
    height: 200px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>

</head>
<body>

<h1>Hello World!</h1>
<p>Selecteer met muis en shift je foto's.</p>

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST')
{

   echo '<pre>';
   print_r($_FILES);
   echo '</pre>';
}

?>

<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="files" name="files[]" multiple />
<input type="submit" value="upload">
</form>


<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

 </script>
</body>
</html>
 
Adoptive Solution

Adoptive Solution

08/03/2019 11:26:46
Quote Anchor link
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
<script>

if( window.FileReader ) {
    document.write('<p>The browser does support the FileReader Object</p>');
} else {
    document.write('<p>The browser doesn\'t support the FileReader Object</p>');
}

if( window.File ) {
    document.write('<p>The browser does support the File Object</p>');
} else {
    document.write('<p>The browser doesn\'t support the File Object</p>');
}

if( window.FileList ) {
    document.write('<p>The browser does support the FileList Object</p>');
} else {
    document.write('<p>The browser doesn\'t support the FileList Object</p>');
}

if( window.Blob ) {
    document.write('<p>The browser does support the Blob Object</p>');
} else {
    document.write('<p>The browser doesn\'t support the Blob Object</p>');
}

</script>

<hr>

<h3><a href="http://www.javascripture.com/FileList">http://www.javascripture.com/FileList</a></h3>

<input id='file-input_1' type='file' multiple>
<p id="file-output_1"></p>

<script>
var fileInput1  = document.getElementById('file-input_1');
var fileOutput1 = document.getElementById('file-output_1');

fileInput1.addEventListener('change', function(event) {
    var input = event.target;
    var output = '';
    for (var i = 0; i < input.files.length; i++)
    {
        output += input.files[i].name + '<br />';
    }
    fileOutput1.innerHTML = output;
});
</script>
 



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.