AJAX image upload

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Fasttrack learning & development voor Java dev

Wat je gaat doen: Wij zoeken enthousiaste en ambitieuze junior en medior ontwikkelaars die toe zijn aan de volgende stap in hun carrière. Wij helpen je op je pad naar senior ontwikkelaar door ons fasttrack learning en development programma. Na een kort en intensief programma ga jij aan de slag bij klanten van DPA. Daarnaast krijg je veel ruimte om je te ontwikkelen als persoon en als specialist. De eerste maand gaan we aan de slag om je certificeringen te behalen waaronder OCP (Oracle Certified Professional). Daarnaast nemen we een deepdive in Spring Boot. Ook laten we je kennismaken met

Bekijk vacature »

Full stack developer Node.js

Functie Als fullstack JavaScript developer vind jij het uitdagend om op basis van concrete klantvragen nieuwe functionaliteiten te ontwikkelen. Bij voorkeur worden deze functionaliteiten op een bepaalde manier geprogrammeerd, zodat ze door meerdere klanten te gebruiken zijn. Je hebt dus vaak te maken met abstracte vraagstukken. Om dit te kunnen realiseren sta je nauw in contact met de product owner en/of klant. Je bent niet alleen onderdeel van het development team, maar hebt ook vaak contact met de product-owner en/of klanten om daardoor inzichten te verzamelen die leiden tot productverbeteringen. • Inzichten verzamelen bij de klant en/of product owner •

Bekijk vacature »

Cymer Patch Server Developer

Vacature details Vakgebied: Software/IT Opleiding: Senior Werklocatie: Veldhoven Vacature ID: 12919 Introductie This new patch server will be built on Python and Django ReST and GraphQL services with a React frontend, it will consist of several microservices and run on a Kubernetes cluster. It will be supported by several middleware applications such as ElasticSearch, Redis, RabbitMQ, Oracle and Artifactory. Functieomschrijving The Patch Admin team always aim to deliver software at a high quality, we avoid sacrifices here to maintain our velocity. Practically this means that we practice test driven development and perform end-to-end automated testing on our software. This means

Bekijk vacature »

Ambitieuze Junior/Medior Low-code Developers gezoc

Bedrijfsomschrijving Transformeer bedrijven met jouw expertise in innovatieve technologie Ben je een bedreven softwareontwikkelaar met ervaring in Low-code platformen, of sta je te popelen om je in deze baanbrekende oplossing te verdiepen? Wij zijn op zoek naar jou! Ons klantenbestand groeit en we willen ons team uitbreiden met deskundige en leergierige Low-code specialisten. Is het jouw passie om organisaties te ondersteunen in hun digitale transformatie en maatwerkoplossingen te bieden met behulp van geavanceerde software? Wij zijn een vooruitstrevend bedrijf dat dagelijks werkt aan het oplossen van complexe vraagstukken om de digitale ambities van onze klanten te realiseren. Functieomschrijving Ontwikkel op

Bekijk vacature »

Software Developer

Longship.io gaat de wereld veroveren met baanbrekende software en legendarische... pizza-avonden! Lees hier de vacature van IT Operations Manager! Bij Longship werken we met een team van 5 mensen aan software voor laadpaal operators. Longship is ontstaan in 2020 met als doel om de elektrische mobiliteitstransitie aan te jagen. We zijn nu al een wereldwijde speler doordat we continu voorop lopen in innovatie. Ons platform helpt het versneld elektrificeren van wagenparken, internationaal! Wij zijn een startup met grote ambities die we willen bereiken met een relatief klein en efficiënt team. Je krijg de kans om ontzettend veel te leren van

Bekijk vacature »

Medior/Senior Software Developers gezocht in de Ra

Functie Op dit moment staan er posities open voor de volgende functies: Front-end, Back-End & Fullstack software developer. Als Front-End software developer werk je met JavaScript en de bijbehorende technologieën zoals TypeScript, Angular, React, Vue en Svelte. Als Back-End software developer ben je bezig in NodeJS en doe je dit met behulp van AWS, NoSQL, REST en GraphQL. Je krijgt leuke en uitdagende opdrachten met een gemiddelde duur van anderhalf jaar. Hier werk je in een team met andere IT’ers aan het ontwikkelen en verbeteren van software. Je wordt begeleid door een accountmanager die fungeert als jouw aanspreekpunt. Het team

Bekijk vacature »

Java Developer

Functieomschrijving Are you an experienced Java Developer who wants to be challenged? Then this is your job! As a Java Developer, you are co-responsible for building custom applications within our extensive IT landscape. Development takes place on both the back-end side (Spring/JEE). Together with the IT department, you are responsible for the daily adjustments and expansions of our IT systems. In addition, you will work in small scrum teams using the Agile methodologies. Besides the realization of our in-house systems, you are responsible for the roll-out of the application (version) as well as the operational support after going live. Team

Bekijk vacature »

Java Programmeur

Functie Heb jij altijd al samen willen werken met ervaren java ontwikkelaars dan hebben wij hier de ultieme kans voor jou! Voor een opdrachtgever in omgeving van Naaldwijk zijn wij op zoek naar uitbreiding van het vaste ontwikkel team. Je zult je hier voornamelijk bezig gaan houden met; Wijzigingsverzoeken van klanten uitvoeren, hier wordt je diep in betrokken; Samen met consultants sluit je aan bij gesprekken met klanten, voor alle projecten; Je schakelt veel met consultants, wat is de behoefte van de klant? Hoe kan je hierop integreren?; Het framework moet naar de Cloud gebracht worden, je wordt betrokken bij

Bekijk vacature »

Webshop beheerder / Fullstack developer

Functie omschrijving Wij zijn op zoek naar een full stack developer die zich bezig gaat houden met het uitbreiden en verbeteren van de online webshop. Een onderdeel van jouw werkzaamheden is naast het beheren van de webshop ook om de processen en structuren te stroomlijnen. Ben jij een leergierige en ambitieuze junior developer met technische skills? Ben jij op zoek naar een werkgever die jouw de volledige vrijheid geeft om jezelf tot een volwaardige senior te ontwikkelen? Lees dan snel verder! Werkzaamheden Onderhouden van de webshop (denk aan het bijhouden van de voorraad); Nieuwe functies toevoegen aan de product configurator

Bekijk vacature »

Lead Webdeveloper

As Lead Web Developer at KUBUS you are responsible for the implementation design of requirements and the software architecture of the web application and services of BIMcollab. In your role as lead developer you will naturally search for the optimum between the required implementation time, the performance of the application and a fast go-to-market of features, in line with our automated test and release train. Together with the other senior developers in your team you monitor the architecture of the application and you advise the product owner about necessary refactoring to improve the maintainability of the platform. Our development team

Bekijk vacature »

PHP Developer

Functie omschrijving Als PHP Developer ga jij aan de slag met uitdagende software projecten. Jij gaat in deze functie software applicaties ontwikkelen. Deze software projecten zijn heel divers, en deze organisatie maakt software, van A tot Z. Klanten kunnen in elke sector werkzaam zijn, van profit tot non-profit. Deze software bouw je vooral in PHP en specifiek Laravel. Dit framework kent dus geen geheimen voor jou. De software die jij gaat ontwikkelen is heel divers, van urenregistratiesystemen tot compleet geautomatiseerde tools. In deze veelzijdige functie ga jij je zeker niet vervelen, elke dag bestaat weer uit nieuwe uitdagingen. Bedrijfsprofiel Deze

Bekijk vacature »

.Net Front-end Ontwikkelaar

Wij zoeken een .Net Front-end Ontwikkelaar! Omschrijving Kun jij snel schakelen en ben je stressbestendig? Dan zoeken wij jou! Als .Net Front-end Ontwikkelaar help je mee aan de webapplicatie die over de hele wereld door allerlei bedrijven wordt gebruikt. Je werkt daarnaast mee aan nieuwe en verbeterde functionaliteiten en helpt met het oplossen van bugs. Over de opdrachtgever Je komt te werken in een ambitieus team dat zich blijft ontwikkelen. Dit is alle informatie die we nu kunnen delen over de werkplek. Als jij de .Net Front-end Ontwikkelaar bent voor deze job, vertellen we je snel nóg meer. Eisen Heb

Bekijk vacature »

C++ Developer

Functieomschrijving Ben jij als software engineer toe aan een nieuwe uitdaging? Dan zijn wij op zoek naar jou! Voor het maken van de procesbesturingsoftware gebruiken onze projectteams een in C++ en C# geschreven tool. Dit is een gedistribueerd object framework wat alle kernfuncties biedt voor een procesautomatisering. Verder zullen jouw werkzaamheden o.a. bestaan uit: Analyseren van vragen en wensen van gebruikers en deze vertalen naar een functioneel ontwerp; Ontwerpen, programmeren en testen van productaanpassingen; Implementeren van nieuwe productreleases in de projectteams; Continu toetsen van het effect van nieuwe releases op andere tools en processen; Inzichtelijk maken van voortgang omtrent softwarewerkzaamheden,

Bekijk vacature »

Front-End React Developer

Als Front-End React Developer verbeter je de user experience van onze eigen webapplicaties voor onze collega's binnen Coolblue. Wat doe je als Front-End React Developer bij Coolblue? Als Front-end React Developer werk je aan de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten met React.js. Je vindt het leuk om samen te werken met de UX designer om stories op te pakken. Daarnaast ben je trots op je werk en verwelkomt alle feedback. Ook Front-end React Developer worden bij Coolblue? Lees hieronder of het bij je past. Dit vind je leuk om te doen Verbeteren van de gebruiksvriendelijkheid van onze webshop

Bekijk vacature »

Front-end Angular developer

Functie In jouw rol als Front-End developer werk je samen met de backend developers om middels tweewekelijkse sprints het platform naar een hoger niveau te tillen. Hiernaast heb je affiniteit met data en werk je graag samen met het team om de gegevensintegriteit en -beveiliging te waarborgen, om ervoor te zorgen dat de gebruiker wereldwijd de beste SaaS-services heeft. Deze organisatie heeft meer dan 100 mensen in dienst, waarvan er 45 in Nederland werken. Het ontwikkelteam bestaat uit 10 mensen en is verdeeld in 2 scrumteams. Het eerste team bestaat uit Java en Scala ontwikkelaars. Het tweede team, waar jij

Bekijk vacature »
Mark Markson

Mark Markson

05/11/2013 15:55:37
Quote Anchor link
Hoi,

Ik wil een eigen imageupload schrijven. Eentje die niet de pagina ververst, maar eentje met AJAX, met Javascript. Ik heb een beetje gezocht naar Formdata etc. maar ik kom er maar niet uit. Iemand een leuke tutorial of een heel simpel stukje script?
 
PHP hulp

PHP hulp

28/03/2024 17:44:35
 
Frank Nietbelangrijk

Frank Nietbelangrijk

05/11/2013 17:01:56
Quote Anchor link
Javascript draait in een geïsoleerde omgeving en kan geen bestanden uploaden. Het beste alternatief is -denk ik- naar een java oplossing te kijken.
 
Kris Peeters

Kris Peeters

05/11/2013 17:05:29
Quote Anchor link
Ondertussen kan dat wel, hoor (vrij recent).

Geen java, geen plugins; ... gewoon javascript in HTML5.

Even zoeken of ik een demo klaar heb
 
Pipo Clown

Pipo Clown

05/11/2013 17:10:00
Quote Anchor link
Volgens mij kan je met javascript, i.c.m. AJAX, een stukje PHP-code uit laten voeren.

Met deze PHP-code is het wel degelijk mogelijk om een image te uploaden.
 
Kris Peeters

Kris Peeters

05/11/2013 17:43:33
Quote Anchor link
Dit maakt deel uit van iets wat ik half-afgewerkt in mijn (virtuele) kast heb steken; Wanneer dit echt van pas komt, doe ik voort ...

Benodigdheden (allemaal in de zelfde map steken):
"index.php"
"upload.php"
"files" (directory, op 777 zetten tijdens het testen)

werking:
De client sleept foto's in een drop-area; javascript genereert een preview (op zich al vrij cool)
De client drukt op de knop.
De foto's worden geüploadet, maar aan de pagina merk je daar voorlopig niets van (wegens code niet klaar).
Je vindt ze wel in de map files\

Kijk zeker ook naar de links die ik in het commentaar zet.

upload.php (merk op dat extra controle hier gewenst is)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
move_uploaded_file ( $_FILES['file']['tmp_name'] , 'files/' . $_FILES['file']['name'] );
?>


index.php
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<style>
#drop_files{
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
#preview{
  width: 300px;
  height: 600px;
  border: 1px solid #000;
  overflow: auto;
  background-color: #101010;
}
#preview li{
  height: 110px;
  width: 140px;
  /*float: left;*/
  list-style: none;
  border: 1px solid #999999;
  margin: 5px;
  background-color: #030303;
  color: #ff6666;
}
#preview img{
  max-height: 110px;
  max-width: 110px;
}
#preview .close{
  float: right;
}
</style>
<div id="drop_files"> Drag and drop image files here </div>
<input type="button" value="upload" id="upload_button">
<ul id="preview"></ul>
<script>
/**
* Upload file
* @see http://stackoverflow.com/questions/4856917/jquery-upload-progress-and-ajax-file-upload
*/
function upload(file, index) {
    var url = 'upload.php';
    //var file = this.files[0];
    
    var xhr = new XMLHttpRequest();
    xhr.file = file; // not necessary if you create scopes like this
    xhr.addEventListener('progress', function(e) {
        var done = e.position || e.loaded, total = e.totalSize || e.total;
        console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
    }, false);
    if ( xhr.upload ) {
        xhr.upload.onprogress = function(e) {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
            console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
        };
    }
    xhr.onreadystatechange = function(e) {
        if ( 4 == this.readyState ) {
            console.log(['xhr upload complete', e]);
        }
    };
    xhr.open('post', url, true);
    
    // Form data.  To give image a name.
    var fd = new FormData;
    fd.append('file', file);
    //fd.append('photo2', file2);
    //fd.append('index', index);
    xhr.send(fd);
}

/**
* preview image
* @see http://stackoverflow.com/questions/16861744/preview-an-image-before-it-is-uploaded-hide-broken-img
*/
function preview(files) {
  $('#drop_files').html(files.toString());
    if (files && files[0]) {
        for(var i=0; i<files.length; i++) {
          var reader = new FileReader();
          reader.onload = function (e) {
            $('#preview').append('<li><span class="close">X</span><img src="' + e.target.result + '"></li>');
          }
          reader.readAsDataURL(files[i]);
        }
    }
    //upload(files[0], 0);
}
/**
*  Drag drop file
* @see http://stackoverflow.com/questions/9544977/using-jquery-on-for-drop-events-when-uploading-files-from-the-desktop
*/
function drag_drop_files(e) {
  //
  $('#drop_files').on(
    'dragover',
    function(e) {
      e.preventDefault();
      e.stopPropagation();
    }
  )
  $('#drop_files').on(
    'dragenter',
    function(e) {
      e.preventDefault();
      e.stopPropagation();
    }
  )
  $('#drop_files').on(
    'drop',
    function(e) {
      if(e.originalEvent.dataTransfer) {
        if(e.originalEvent.dataTransfer.files.length) {
          e.preventDefault();
          e.stopPropagation();
          // copy file data to the uploadWidget
          
          // uploadWidget.files.push(e.originalEvent.dataTransfer.files.FileList);
          uploadWidget.files.push(e.originalEvent.dataTransfer.files);
          
          /*UPLOAD or PROCESS FILES HERE*/
          preview(e.originalEvent.dataTransfer.files);
          // refresh sortable
          $("#preview").sortable('refresh').disableSelection();
        }
      }
    }
  );
}

var uploadWidget = new Object();
uploadWidget.files = new Array();

$(document).ready(function() {
  drag_drop_files(null);
  
  $("#preview").sortable({
    update: function() {
      // voorlopig doen we hier niets
    }
  });
  
  $('#upload_button').click(function(e) {
    for(var i=0; i<uploadWidget.files[0].length; i++) {
      upload(uploadWidget.files[0][i], i);
    }
  });
  
});
</script>
Gewijzigd op 05/11/2013 17:57:26 door Kris Peeters
 



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.