AJAX image upload

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Python Developer

Dit ga je doen Als Python Developer ben je verantwoordelijk voor: Het ontwikkelen van Stuurprogramma's in Python zodat er verbindingen kunnen worden gelegd tussen besturingssystemen en (AV) hardware; Het testen en debuggen van Stuurprorgamma's; Het communiceren met noodzakelijke partijen in gevallen waar extra technische details nodig zijn om een Stuurprogramma te ontwikkelen of problemen op te lossen; Het maken van de nodige technische documentatie (in het Engels); Het participeren in een Scrum/Agile omgeving. Hier ga je werken Deze internationale organisatie is wereldwijd een succesvol producent en leverancier van professionele AV hard- en software. Klanten gebruiken de producten o.a. voor het

Bekijk vacature »

Junior .NET developer

Functie Wij hebben drie scrumteams. Het eerste team focust zich op het stukje hardware wat wij in huis doen. Zij maken als team o.a. gebruik van C++. De andere twee scrumteams zijn allebei bezig met data verwerking en maken hierbij in de backend gebruik van C# .NET / .NET Core. Het verschil tussen deze teams is dat één team de data verwerking doet voor de mobiele applicatie. Zij werken hierbij dus ook met Xamarin. Het andere team focust zich op de webapplicaties en maakt hierbij ook gebruik van ASP.NET MVC. Op basis van jouw ambities en kwaliteiten kijken wij samen

Bekijk vacature »

Fullstack developer - medior

Functie omschrijving Ben jij toe aan een nieuwe uitdaging en zou jij graag bij een platte maar informele organisatie willen werken? Voor een mooi softwarebedrijf in omgeving Gorinchem zijn wij op zoek naar versterking. Als Fullstack developer wordt je bij dit bedrijf onderdeel van de volledige ontwikkeling van requirement tot oplevering! Werkzaamheden Jouw focus ligt op de front end en alles wat daarbij komt kijken. Je gaat ontwerpen, ontwikkelen, testen en valideren. Je zult voornamelijk werken met React.js en Typescript. Maar ook Javascript, HTML en CSS komen aanbod. Daarnaast zal je ook regelmatig met de back end werken! Bedrijfsprofiel Onze

Bekijk vacature »

Software programmeur

Functieomschrijving Voor een erkende werkgever in de regio van Goes zijn wij op zoek naar een enthousiaste software programmeur met PHP/Symfony ervaring. Een gedreven persoon die het development team komt versterken met het aanpakken van complexe projecten. Ben jij op zoek naar een baan met veel uitdaging binnen een snelgroeiend e-commerce bedrijf, waar je de tijd en ruimte krijgt voor zowel professionele als persoonlijke groei? Lees dan snel verder! Dit ga je doen: Beheer en ontwikkeling van de serviceportal in Symfony en de webshops in de tweede versie van Magento; Testen en door ontwikkelen van software; Ontwikkelen van nieuwe functionaliteiten;

Bekijk vacature »

SQL database ontwikkelaar

Functie omschrijving Ben jij niet bang voor complexe algoritmes? Schikt het schrijven van procedures in T-SQL jouw niet af en heb jij al de nodige informatie in SQL, dan is functie precies wat voor jou! Jouw werkzaamheden gaan er als volgt uit zien: Je gaat werken aan de complexere projecten waar jij van A tot Z bij betrokken bent. Je gaat zorg dragen voor het ontwerp, de ontwikkeling en het updaten van SQL databases. Dit doe je op basis van T-SQL. Jij bent van start tot finish betrokken bij de projecten die jij leidt. Je houdt contact met klanten en

Bekijk vacature »

Als Front-end developer samenwerken met de beste c

Functie Momenteel zijn we voor één van de projecten bij hun key partner, een voorloper in de energiesector, op zoek naar gedreven Front-end developers. Ze nemen de lead in dit project en werken uitsluitend met vooruitstrevende technologieën. Ze verwachten dat de technologie die hier wordt ontwikkeld uiteindelijk door veel meer grote corporates, in verschillende sectoren zal worden toegepast. Dit is dan ook een heel uitdagend project om aan mee te gaan werken. Het team bestaat o.a. uit User Experience designers, Data Scientists en Software Engineers. De consultants en ontwikkelaars werken volgens de Design Thinking methode waarbij de eerste stappen van

Bekijk vacature »

Senior Java Developer

Als Senior Java Developer bij Sogeti ben je onderdeel van onze toonaangevende community die bestaat uit ruim 100 gepassioneerde Java professionals. In teamverband lever je mooie prestaties. Daarmee draag je aan bij de meerwaarde die wij leveren aan onze top-opdrachtgevers. Geen werkdag is hetzelfde! Je bent voortdurend bezig met het oplossen van allerlei complexe vraagstukken binnen bedrijfs kritische systemen voor onze klanten in regio Noordoost zoals DUO, ING, CJIB en Tendernet. Natuurlijk krijg jij de mogelijkheid je verder te certificeren in dit vakgebied. We organiseren regelmatig technische Meetups en doen veel aan kennisdeling. Sogetisten hebben plezier in hun werk en

Bekijk vacature »

.net developer

Hoi! Wij zijn auto.nl en wij verkopen auto's online. je bestelt bij ons een auto net zo makkelijk als een spijkerbroek. En bevalt ie niet? Dan stuur je 'm gewoon weer terug. En dat we dat goed doen bewijst onze hoge klanttevredenheid van een 9,3. Nu maken we de volgende stap bij auto.nl. We starten met fysieke winkels. Online zoeken, offline bekijken. Maar nog altijd, geen gedoe! Gewoon eerlijk, transparant en zonder zorgen een auto kopen.. Maar om dat waar te blijven maken en nóg beter te worden, zoeken we uitbreiding van ons development team. Wat ga je precies doen?

Bekijk vacature »

Magento developer

Functie E-commerce is een ‘’snelle’’ wereld. Om hierin continu voorop te blijven omarmen ze in een vroeg stadium nieuwe technieken. Een webshop is nooit af en kan altijd beter, sneller en efficiënter. Tegelijkertijd hebben ze vanaf hun oprichting altijd vastgehouden aan kwaliteit boven snelheid, en dit loont. Als back-end developer fungeer je als het verlengstuk van hun klanten. Technisch complexe zaken pak je met liefde op, en hierin werk je samen met o.a. front-end developers en designers. Klanten verwacht hierin kwaliteit van het hoogste niveau en een proactieve, meedenkende rol bij het maken van zowel technische als strategische keuzes. Ga

Bekijk vacature »

Applicatieontwikkelaar Java EE

Bedrijfsomschrijving De IV- organisatie van de Belastingdienst is verantwoordelijk voor en verzorgt de ICT- voorzieningen. Het merendeel van de applicaties wordt op dit moment door de IV- organisatie zelf ontwikkeld, onderhouden en beheerd in het eigen data center. Naast de zorg voor continuïteit op de massale heffing- en inningsprocessen die plaatsvinden binnen een degelijke, stabiele omgeving, wordt er tevens volop gewerkt aan modernisering van het IV- landschap. Dit gebeurt deels intern door gebruik te maken van de expertise die intern aanwezig is, maar ook door het aantrekken van (kant-en-klaar) oplossingen en expertise uit de markt. Functieomschrijving De afdeling IV –

Bekijk vacature »

Front-end developer

Functie Als front-end developer kom je te werken in een team van 30 gedetacheerde, en het team is momenteel flink aan het groeien. Je hebt ervaring met het bouwen van complexe bedrijfsapplicaties waar je gebruik maakt van de nieuwste technologieën waarmee jij elke klant omver blaast. Het gaat om uitdagende projecten met een gemiddelde doorlooptijd van 2 jaar. Hierdoor heb jij echt de volledige focus op een project en kun je flinke impact maken. Het team zit boordevol met ervaren developers die samen dezelfde ambitie delen. Aan de hand van opleidingen en trainingen kun je certificaten halen in jouw expertise

Bekijk vacature »

(Junior) Back-end Ontwikkelaar

Functie omschrijving We are looking for a dutch native speaker Altijd al willen werken bij een organisatie, die maatwerk applicaties bouwt, die echt impact hebben in de maatschappij? Dit is je kans. Voor een kleine organisatie in de regio van Eindhoven ben ik op zoek naar een C# Ontwikkelaar. Jij gaat aan de slag met de ontwikkeling van maatwerk software en applicaties. Deze organisatie werkt voor grote organisaties in Nederland, maar ook voor het MKB. De projecten waar je aan gaat werken zijn erg divers, waardoor je werk uitdagend blijft en je erg veel kan leren. Verder ga je aan

Bekijk vacature »

Senior C# Software Ontwikkelaar te Zaandam

Bedrijfsomschrijving Deze werkgever heeft als missie om haar klanten op ICT-gebied volledig te ontzorgen. Ze zijn een ICT bedrijf met een verscheidenheid aan ICT oplossingen waaronder Cloud oplossingen en een groot deel van het werk is gericht op software realisatie. Voor de Enterprise-klanten voert het relatief kleine ontwikkelteam waar jij deel uit van kan gaan maken binnen deze organisatie te Zaandam de grootste opdrachten uit. Niet alleen websites en complexe webapplicaties maar ook mobile apps, web services en complete systeemintegraties! Je moet dan denken aan Dynamics, Sharepoint en Salesforce. Je komt hier terecht in een relatief kleine organisatie met ontzettend

Bekijk vacature »

Network Engineer (f/m/d) in Heidelberg

Network Engineer (f/m/d) The IT Services team operates and supports the IT infrastructure and services at EMBL headquarters in Heidelberg and at the laboratory’s sites in Barcelona and Rome. As part of IT Services, the Network team is responsible for managing and developing the network infrastructure in our data centres, on campus, and to our external network providers. As a leading scientific institution with highly data-intensive research, extensive data flows at and between the laboratory’s six sites and to the Internet, EMBL is connected to national and international scientific networks using state-of-the-art technologies from vendors including Cisco, Extreme Networks and

Bekijk vacature »

Senior Cobol Applicatieontwikkelaar

Bedrijfsomschrijving De IV- organisatie van de Belastingdienst is verantwoordelijk voor en verzorgt de ICT- voorzieningen. Het merendeel van de applicaties wordt op dit moment door de IV- organisatie zelf ontwikkeld, onderhouden en beheerd in het eigen data center. Naast de zorg voor continuïteit op de massale heffing- en inningsprocessen die plaatsvinden binnen een degelijke, stabiele omgeving, wordt er tevens volop gewerkt aan modernisering van het IV- landschap. Dit gebeurt deels intern door gebruik te maken van de expertise die intern aanwezig is, maar ook door het aantrekken van (kant-en-klaar) oplossingen en expertise uit de markt. Functieomschrijving In de applicatie ETM

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

29/03/2024 05:50:02
 
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.