Foto's uploaden script met voorbeeld functie.
Weet iemand een goed script hiervoor, het liefst zo klein/makkelijk mogelijk.
- Aar - op 30/06/2014 01:36:47:
Dat ziet er goed uit voor het uploaden van de afbeeldingen maar hoe kan ik dan een instant voorbeeld weergave laten zien als er een bestand geselecteerd wordt?
Furio Scripting op 30/06/2014 13:58:11:
Dat ziet er goed uit voor het uploaden van de afbeeldingen maar hoe kan ik dan een instant voorbeeld weergave laten zien als er een bestand geselecteerd wordt?
Wat je server (nog) niet heeft kan ie ook niet laten zien. Ook marktplaats laat niets zien voordat je een bestand geselecteerd hebt. Wat wél kan is een auto-submit door middel van AJAX. Dus gebruiker kiest een bestand, javascript krijgt een onchange event voor de <input type="file" /> , pakt de file-data en roept dmv AJAX een PHP script aan die het bestand uploadt. Na dit alles is het bestand wel op de server aanwezig en kan door javascript weer dmv AJAX gedownload worden (of een thumbnail) en getoond worden op de webpagina. Al bij al best een hele klus.
Meer info: http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax
ik gebruik deze code op mijn site http://jsfiddle.net/4pTGg/
html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<div>
<h2>Niewe film</h2>
<div class="bericht">
<div class="box" style="text-align:center;">
<img id="cover" src="http://moviechecker.be/main/icon/poster_x.png" alt="Geen cover" width="100%">
</div>
Film poster*:<br>
<input accept="image/*" type="file" name="file" id="cover_input"><br>
<br>
</div>
</div>
<h2>Niewe film</h2>
<div class="bericht">
<div class="box" style="text-align:center;">
<img id="cover" src="http://moviechecker.be/main/icon/poster_x.png" alt="Geen cover" width="100%">
</div>
Film poster*:<br>
<input accept="image/*" type="file" name="file" id="cover_input"><br>
<br>
</div>
</div>
jquery
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
/*=== poster weergave*/
/*functie*/
function readImage(input) {
if ( input.files && input.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
$('#cover').attr("src", e.target.result);
};
FR.readAsDataURL(input.files[0]);
}
}
/*trigger*/
$("#cover_input").change(function(){
readImage(this);
});
});
/*=== poster weergave*/
/*functie*/
function readImage(input) {
if ( input.files && input.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
$('#cover').attr("src", e.target.result);
};
FR.readAsDataURL(input.files[0]);
}
}
/*trigger*/
$("#cover_input").change(function(){
readImage(this);
});
});
Gewijzigd op 30/06/2014 23:50:26 door php knipper
wat betreft je laatste vraag: http://www.html5rocks.com/en/tutorials/file/dndfiles/. Ook dit is in HTML5.
ik gaf een oplossing voor "Wat je server (nog) niet heeft kan ie ook niet laten zien. "
@Furio Scripting
is dit wat je zoekt?
http://maraustria.wordpress.com/2014/04/25/multiple-select-and-preview-of-image-of-file-upload/
Dus als jullie een fix weten die voor alle browsers netjes werkt heel graag anders gaat dit idee de koelkast in tot de technologie zo ver is.
Toevoeging op 02/07/2014 02:21:57:
Furio Scripting op 02/07/2014 01:13:01:
Alle codes zien er goed uit en werken prima in Firefox en Chrome maar in IE9 en waarschijnlijk lager werkt het niet... en ook in mijn android browser en android chrome wil de preview niet lukken.
Dus als jullie een fix weten die voor alle browsers netjes werkt heel graag anders gaat dit idee de koelkast in tot de technologie zo ver is.
Dus als jullie een fix weten die voor alle browsers netjes werkt heel graag anders gaat dit idee de koelkast in tot de technologie zo ver is.
Na nog een uurtje te hebben gestoeid heb ik het idee tijdelijk laten vieren omdat er teveel complicaties bij komen kijken, zo kan je een input type file helaas niet de value laten onthouden bij een page refresh (veiligheid kwestie van browsers) en moeten sommige mobiele browsers bij een file preview zichzelf herladen om geheugen vrij te maken. Teveel hassle dus voor een functie die wellicht meer kwaad dan goed doet.