2 keer 1 foto pre-viewen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Product Developer

ONZE OPDRACHTGEVER Slimstock is specialist in het leveren van kennis en software op het gebied van Forecasting, Demand planning, Supply chain management en Inventory management. Ons softwarepakket Slim4 helpt klanten om de juiste voorraad op het juiste moment op de juiste plaats te krijgen. We helpen onze klanten bij het verlagen van hun voorraad en tegelijkertijd het verhogen van de servicegraad. FUNCTIEOMSCHRIJVING Doel van de functie Als Product Developer Slim4 werk je aan het (door)-ontwikkelen van onze Forecasting & Inventory Management tool Slim4. Hierbij draag je bij aan het maken/opstellen van (technische) specificaties voor onze software programmeurs. Daarnaast werk je

Bekijk vacature »

Mobile Developer

Wat je gaat doen: DPA GEOS is op zoek naar enthousiaste Mobile Developers om het team te versterken. Als Mobile Developer werk je in Agile teams bij onze klanten en ben je verantwoordelijk voor hun grotere mobiele web applicaties. Met collega’s ontwikkel je hoogwaardige software voor verschillende opdrachtgevers in jouw regio. Je ontwikkelt, adviseert over architectuur en past de nieuwste technologieën toe. Je bent een ambitieuze professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande interesse in Mobiele applicaties. Je staat met beide benen op de grond en je kunt goed samenwerken. Je bijt

Bekijk vacature »

developer recherchetools

Wat ga je doen? Als developer pas je bestaande software aan en ontwerp en realiseer je nieuwe applicaties. Je zet zelfstandig projecten op en stemt requirements af met de gebruiker. Vervolgens vertaal je de gebruikerswensen naar systeemeisen. Je begeleidt ook de uitbesteding van softwareapplicaties en technische informatiesystemen. Je bent niet per se gebonden aan een programmeertaal of platform, maar probeert verschillende programmeertalen uit met je github-account. Tevens lever je een bijdrage aan het ontwerpen en integreren van complexe netwerken en/of infrastructuren op het gebied van digitale opsporing. Vakinhoudelijk fungeer je als aanspreekpunt voor en maak je afspraken met in- en

Bekijk vacature »

Junior, medior of senior .NET C# ontwikkelaar, com

Ben je als junior, medior of senior .NET ontwikkelaar op zoek naar een analytische omgeving? Waar hoogopgeleiden en ervaren collega’s jouw kennis naar een hoger niveau kunnen tillen? Waar je met een leuk team samen aan innovatieve producten werkt? Dan zou de deze organisatie wel eens goed bij je kunnen passen. Voor een organisatie in Delft zoeken we momenteel een junior, medior of senior .NET C# ontwikkelaar. De organisatie richt zich zowel op websites als complexe maatwerk applicaties voor externe klanten. Tevens moet je (afhankelijk van je niveau) mee kunnen denken met functionele en architectonische vraagstukken. De projecten kunnen erg

Bekijk vacature »

accountmanager cybercrime Publiek-Private Samenwer

Wat ga je doen? Een effectieve bestrijding van cybercrime is alleen mogelijk in nauwe samenwerking met publiek-private partners. Om veiligheidsproblemen aan te kunnen pakken worden slimme samenwerkingsverbanden gevormd. Als accountmanager cybercrime PPS bouw je nieuwe netwerken op buiten de eigen organisatie of benut je bestaande netwerken ten behoeve van de vorming van nieuwe publiek-private samenwerkingsverbanden. Het gaat hierbij om een projectmatige insteek waarbij de politie als een betrouwbare partner samenwerkingsverbanden opbouwt en zo uitvoering geeft aan PPS projecten. Als bruggenbouwer breng je mensen met verschillende achtergronden en belangen bij elkaar. Je spreekt met techneuten, beslissers, academici, overheidsfunctionarissen en mensen uit

Bekijk vacature »

(Senior) Tester

Energie krijgen van test driven development. Dat krijgen onze testers. Voor het opzetten en uitwerken van testautomatisering zoeken wij een collega (Senior) Tester Iemand die graag werkt volgens de methode Agile Scrum in één van onze DevOps teams. Wij laten jou verbaasd staan van alle innovaties. Jij verrast ons met nieuwe toepassingen tijdens onze maandelijkse innovatie dag. Het team en werkzaamheden Als tester binnen het Kadaster werk je in een professionele, ervaren en gedreven Agile Scrum omgeving. Onze teams maken gebruik van Robot Framework. Kennis van en ervaring met testautomatisering en Robot Framework is daarom een belangrijke pré. Je wordt

Bekijk vacature »

ASP.NET Developer Environmental Labotary research

ASP.NET Developer Environmental Laboratory research What are you going to do? As an ASP.NET MVC Developer, you will work for a laboratory in Rotterdam. In the laboratory, they conduct environmental research, which varies from the quality of soil, water and air. With the results, they are able to support construction projects, health and safety projects. Within the company, you will be working on an ASP.NET web application. With techniques such as C#, ASP.NET, MVC, WCF, JavaScript, jQuery, CSS, WEB API, REST, JIRA, AGILE/ SCRUM. You will be responsible for the design and delivery of the end-to-end scenarios and features -

Bekijk vacature »

Frontend developer Planning en Poolbeheer

Locatie/Standplaats Amsterdam Functieomschrijving Wil jij deel uitmaken van een DevOps teams in wording waar jij klanten van ons helpt met het indienen van hun aanvragen en het beheren van hun pool? Het I-Plan team levert o.a. core applicatie(s) waarmee onze planners en klanten de beste planningen maken. De tooling is toonaangevend en onderscheidend in de markt met bv zelfrooster functionaliteit en services voor apps. Binnen het I-Plan team werken we met proven technology en hebben we een ietwat andere kijk op front-end ontwikkeling waarbij er met pure js (ES6) - geen framework - wordt gewerkt. Er zijn verschillende redenen geweest

Bekijk vacature »

Java Developer

Jij volgt ontwikkelingen op de voet. Sterker nog: je bent er een onderdeel van. Jij loopt voorop. Jij denkt met klanten mee en helpt hen innoveren. Zo kun jij een bijdrage leveren aan de Rabobank-app, de beveiliging van treinen voor Pro-rail verbeteren of de website van ING een boost geven. Vergaderen? Liever gewoon zorgen dat het werkt! Hoe omschrijft men een Sogetist? Gedreven, resultaatgericht en niet snel tevreden. Wat niet wil zeggen dat je nooit met hem of haar kunt lachen. Integendeel. Plezier hoort wat ons betreft net zo goed bij werken. Maar we gaan op de eerste plaats voor

Bekijk vacature »

Software developer PHP/MySQL

Werk aan marketing automation en e-mailmarketingsoftware Functieomschrijving We zoeken per direct een medior / senior Software Developer die bij kan dragen aan de (door-)ontwikkeling van ons volledig in-house ontwikkelde marketing automation en e-mailmarketingsoftware Clang. Als Software Developer denk je proactief mee in de verbetering van Clang én je bent een interne vraagbaak voor collega's. We werken continu aan de optimalisering van de software, deliverability en dienstverlening aan de hand van marktontwikkelingen en specifieke klantwensen, innovaties in techniek, softwareontwikkelingen en trends in de markt. En hiervoor hebben we mensen nodig die van afwisseling in het werk houden en kennis van zowel

Bekijk vacature »

Lead Developer

Are you a lead developer with an architect's skills? A digital architect who, by travelling regularly and working in close partnership with your teams in France, India and the Netherlands, will bring our airline to the next level? Then we're looking for you! Lead Developer As a Lead Developer, you're our pilot in infinite airspace. You use thorough research to lead us to all the new technological possibilities. Artificial intelligence, speech recognition, biometrics, open API: how can we serve our customers – as effectively as possible? We're ahead of the pack, but how do we maintain that position? And where

Bekijk vacature »

Oracle Apex Ontwikkelaar

Wat je gaat doen: Als Oracle Ontwikkelaar werk je zowel zelfstandig als in teamverband aan het ontwikkelen en ontwerpen van software componenten. Je levert een bijdrage aan de ontwikkeling tot en met de implementatie. Je bent in staat om informatie te verzamelen,te analyseren en te documenteren van wensen en eisen van de eindgebruikers. Je bent in staat om functionele vereisten te vertalen naar technische specificaties, ontwikkelt web applicaties met behulp van Oracle Applicatie Express, door de veranderingen en ontwikkelingen van web formulieren en rapporten. Verbeteren van bestaande Oracle Apex Systemen. Ontwikkelen en veranderen van Oracle 11g database schema’s. Schrijven van

Bekijk vacature »

Vacature voor Senior Software Engineer

Vacature voor Senior Software Engineer Datacon in Tilburg is op zoek naar een gedreven .NET webontwikkelaar Net als wij werk je vanuit een passie voor het web en IT. Je bent sterk gedreven in het ontwikkelen van je (technische) kennis en vaardigheden, neemt initiatief en bent klantgericht. Jouw functie Wij zoeken een gedreven webdeveloper, die webprojecten in teamverbanden realiseert. Hierbij wordt oa gebruik gemaakt van C#/.NET en SQL Server. Daarnaast pas je divers gerelateerde webtechnologieën toe, zoals REST, Node.js, WCF en MVC. Onze weboplossingen zijn grootschalige webportalen, zoals e-Commerce en klantportalen met een sterke IoT component, die cruciaal zijn voor

Bekijk vacature »

.Net Web Developer

Wat je gaat doen: Of beter nog, wat wil jij doen? Bij DPA werken onze consultants als Web Developer / software ontwikkelaar in Agile teams bij onze klanten en zijn ze verantwoordelijk voor de grotere webapplicaties. Wil jij dit ook, want we zijn op zoek naar enthousiaste Web Developers / software ontwikkelaars om ons development team te versterken. Je draagt positief bij aan de teamgeest binnen een projectteam en je ondersteunt de software architect en projectleider bij hun werkzaamheden. Je gaat webapplicaties maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit

Bekijk vacature »

Drupal developer

Drupal developer Ben jij een Drupal developer, op zoek naar een mooie uitdaging bij een organisatie die volop in ontwikkeling is? Zie jij jezelf in de rol van full-stack ontwikkelaar, waar je je onder andere bezig houdt met de puzzel van koppelingen met content systemen en autorisatie modules, en ons scherp houdt op het gebied van generieke oplossingen vs. maatwerk? Steek je graag de handen uit de mouwen om mooie nieuwe features op te leveren? Lees dan verder! Dit ga je doen Je komt te werken in een enthousiast team met twee andere developers (1 back-end en 1 front-end), twee

Bekijk vacature »
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/05/2019 09:28:11
Honeypot
 
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.