En sak som är bra när man jobbar med Ajax är att du först förbereder ditt PHP script som du "tror" att du vill ha det. Efter det skulle jag rekommendera att göra en en vanlig "dummy" sida med enbart ett vanligt formulär som du testar med.
Då vet du exakt hur filerna sparas och om det fungerar. Efter det kan du gå vidare och implementera ajaxlösningen.
Det kan nämlingen vara lite bökigt att felsöka serversidan när du kör med ajax. Som The_Hulk säger, den enda raden du egentligen behöver till att börja med är move_uploaded_file() så starta med ett minimalt script, när du ser att bilden verkligen sparas på servern kan du justera / bygga ut det.
Okey, nu har jag gjort en ny php fil och fått den ungefär som jag vill ha den. Det återstår fortfarande ett litet bekymmer som jag inte vet hur jag ska lösa. Jag har flera olika album som man kan välja mellan i en select lista innan man laddar upp bilderna. Sedan så ändras formulärets action beroende på vilket album man väljer. Det fungerar utmärkt när jag använder min "dummy" sida. Men när jag använder ajax så funkar det helt plötsligt inte.
Hur ska jag göra för att kunna välja album?
$var_album = $_GET["id"];
if($_FILES["Filedata"]["name"] == "")
{
echo "Du har inte valt någon fil";
}else{
if ($_FILES['Filedata']['size'] > 2 * 1024 * 1024)
{
echo "Det går inte att ladda upp en bild större än 2MB";
}else{
if (!($size = @getimagesize($_FILES['Filedata']['tmp_name'])))
{
echo "Det går bara att ladda upp bilder.";
}else{
if (!$error && !in_array($size[2], array(1, 2, 3, 7, 8)))
{
echo "Det går bara att ladda upp bilder av typen: JPEG, GIF or PNG.";
}else{
if (!$error && ($size[0] < 25) || ($size[1] < 25))
{
echo "Bilden måste vara större än 25px";
}else{
if (file_exists("../uploads/" . $var_album . $_FILES["Filedata"]["name"]))
{
echo "<b><i>" . $var_name . "</i></b> finns redan.";
}else
{
move_uploaded_file($_FILES['Filedata']['tmp_name'], "../uploads/" . $var_album . $_FILES["Filedata"]["name"]);
}
}
}
}
}
}
alltså variablen $var_album får inget värde.
och här är javascript funktionen för att ändra action:
function valjAlbum(myField)
{
document.getElementById("demot").style.visibility="visible";
document.getElementById("albumet").style.visibility="hidden";
var stringAlbum = myField.value;
alert(formen.action);
formen.action="server/admin.php?target=galleri&id=" + stringAlbum;
alert(formen.action);
}
en alert ruta kommer upp med rätt url så det borde funka tycker jag!
Du måste hämta album id/namn via POST, du måste alltså lagra värdet i antingen en selectlista eller som en <input type="hidden".../>
Det funkar fortfarande inte. Här är koden för fomuläret:
<form action="server/admin.php?target=galleri" method="post" name="formen" enctype="multipart/form-data" id="form-demo">
<input type="hidden" name="VilketAlbum" id="VilketAlbum" value="22" />
<fieldset id="demo-fallback">
<legend>File Upload</legend>
<p>
This form is just an example fallback for the unobtrusive behaviour of FancyUpload.
If this part is not changed, something must be wrong with your code.
</p>
<label for="demo-photoupload">
Upload a Photo:
<input type="file" name="Filedata" />
</label>
</fieldset>
<div id="demo-status" class="hide">
<p>
<a href="#" id="demo-browse">Browse Files</a> |
<a href="#" id="demo-clear">Clear List</a> |
<a href="#" id="demo-upload">Start Upload</a>
</p>
<div>
<strong class="overall-title"></strong><br />
<img src="assets/progress-bar/bar.gif" class="progress overall-progress" />
</div>
<div>
<strong class="current-title"></strong><br />
<img src="assets/progress-bar/bar.gif" class="progress current-progress" />
</div>
<div class="current-text"></div>
</div>
<ul id="demo-list"></ul>
</form>
och koden i admin.php:
$var_album = $_POST["VilketAlbum"];
ger inte var_album något värde! vad är det som blir fel?
Leta efter det här i FancyUploadkoden:
// url is read from the form, so you just have to change one place
url: $('form-demo').action,
Komplettera så att det ser ut såhär:
// url is read from the form, so you just have to change one place
url: $('form-demo').action,
data: $('form-demo').toQueryString(),
Det gör att ev. extra värden också skickas med så nu kommer du "nå" värdet med hjälpa av POST
Har du Firebug installerad i Firefox? Om inte, gör det så ser du jättelätt vad som skickas med och vilka värden du har.
MickeA.com skrev:
Leta efter det här i FancyUploadkoden:
// url is read from the form, so you just have to change one place
url: $('form-demo').action,
Komplettera så att det ser ut såhär:
// url is read from the form, so you just have to change one place
url: $('form-demo').action,
data: $('form-demo').toQueryString(),
Det gör att ev. extra värden också skickas med så nu kommer du "nå" värdet med hjälpa av POST
Najs, tack, nu funkar det!
Allt det här som jag har skrivit finns dokumenterat på sidan där du laddade hem alla filer. Men bra att det fungerar, lycka till.
Jag har fortfarande problem med det där scriptet. Allting funkar, bilden laddas upp och sådär. Men texten: "An error occured: uppladdningen lyckades" kommer alltid upp ändå. Jag är inte van med sådana här komplicerade script och hoppas på att någon kan säga mig vad jag ska göra.
$var_album = $_POST["album"];
if($_FILES["Filedata"]["name"] == "")
{
echo "Du har inte valt någon fil";
}else{
if ($_FILES['Filedata']['size'] > 2 * 1024 * 1024)
{
echo "Det går inte att ladda upp en bild större än 2MB";
}else{
if (!($size = @getimagesize($_FILES['Filedata']['tmp_name'])))
{
echo "Det går bara att ladda upp bilder.";
}else{
if (!$error && !in_array($size[2], array(1, 2, 3, 7, 8)))
{
echo "Det går bara att ladda upp bilder av typen: JPEG, GIF or PNG.";
}else{
if (!$error && ($size[0] < 25) || ($size[1] < 25))
{
echo "Bilden måste vara större än 25px";
}else{
if (file_exists("../uploads/" . $var_album . $_FILES["Filedata"]["name"]))
{
echo "<b><i>" . $var_name . "</i></b> finns redan.";
}else
{
move_uploaded_file($_FILES['Filedata']['tmp_name'], "../uploads/" . $var_album . $_FILES["Filedata"]["name"]);
echo "uppladdningen lyckades";
}
}
}
}
}
}
Jag använder bild.html filen men en tillagd select ruta. Det skulle uppskattas om någon kunde hjälpa mig och säga vad som bör ändras för att bli av med felmeddelandet.
Du kan inte skriva ut ev. fel med echo överhuvudtaget i det här fallet. Om du läser dokumentationen som finns på sidan där du laddar hem scriptet så framgår det klart och tydligt att du måste ge XML/JSON output som FancyUpload sedan parsar.
MickeA.com skrev:
Du kan inte skriva ut ev. fel med echo överhuvudtaget i det här fallet. Om du läser dokumentationen som finns på sidan där du laddar hem scriptet så framgår det klart och tydligt att du måste ge XML/JSON output som FancyUpload sedan parsar.
Det är ju just det, jag är helt obekant med uttryck som XML/JSON. Kan du ge exempel på ett sådant output och lite snabbt förklara vad som händer så skulle jag var tacksam.
noshornin skrev:
Det är ju just det, jag är helt obekant med uttryck som XML/JSON. Kan du ge exempel på ett sådant output och lite snabbt förklara vad som händer så skulle jag var tacksam.
Nej, nu har jag försökt tala om för dig att läsa dokumentationen (där allt står förklarat inkl. exempel) ett flertal gånger, har du överhuvudtaget tittat där?
MickeA.com skrev:
Nej, nu har jag försökt tala om för dig att läsa dokumentationen (där allt står förklarat inkl. exempel) ett flertal gånger, har du överhuvudtaget tittat där?
Jag har visst kollat dokumentationen, men jag förstod knappt något som stod där och jag hittade inga exempel. Jag kanske inte hittat den dokumentationen som du refererar till. Skulle du kunna länka dit?
Men om du inte förstår någonting av det som står kanske du ska börja med något lättare och läsa på om grunderna i ajax/php och hur dom "jobbar" tillsammans på bästa sätt.
Sök här på forumet, på Google osv. det finns hur mycket information som helst. Nu använder FancyUpload MooTools som är ett ramverk i javascript, så du bör ju även läsa på om hur det fungerar.
Jag känner bara att jag vill få det här att funka. Har ingen större lust att sätta mig ner och lära mig hur man arbetar med ajax och php tillsammans... Annars får jag väll strunta i att det dyker upp ett felmeddelande, bilden laddas ju upp ändå.
Nej, det är ju inte lätt om man inte ens vill lära sig...
Såhär kan det t.ex. se ut om man använder JSON:
save_picture.php
$error = false;
if(!isset($_FILES['Filedata'])){
$error = "Välj en fil";
}else if(!isset($_POST['album_id']) || !is_numeric($_POST['album_id'])){
$error = "Du måste välja ett album";
}else if... {
}else{
// Kod för att spara bilden på servern...
}
if(!$error == false){
$return = array(
'status' => '0',
'error' => $error
);
}else{
$return = array(
'status' => '1',
'name' => $new_name
);
}
echo json_encode($return);
slutet av FancyUpload koden
/**
* This one was directly in FancyUpload2 before, the event makes it
* easier for you, to add your own response handling (you probably want
* to send something else than JSON or different items).
*/
onFileSuccess: function(file, response) {
var json = new Hash(JSON.decode(response, true) || {});
if (json.get('status') == '1') {
file.element.addClass('file-success');
file.info.set('html', '<strong>Filen har sparats:</strong> ' + json.get('name'));
} else {
file.element.addClass('file-failed');
file.info.set('html', '<strong>Ett fel uppstod:</strong> ' + (json.get('error') ? json.get('error') : response));
}
},
/**
* onFail is called when the Flash movie got bashed by some browser plugin
* like Adblock or Flashblock.
*/
onFail: function(error) {
switch (error) {
case 'hidden': // works after enabling the movie and clicking refresh
alert('To enable the embedded uploader, unblock it in your browser and refresh (see Adblock).');
break;
case 'blocked': // This no *full* fail, it works after the user clicks the button
alert('To enable the embedded uploader, enable the blocked Flash movie (see Flashblock).');
break;
case 'empty': // Oh oh, wrong path
alert('A required file was not found, please be patient and we fix this.');
break;
case 'flash': // no flash 9+ :(
alert('To enable the embedded uploader, install the latest Adobe Flash plugin.')
}
}
MickeA.com skrev:
Nej, det är ju inte lätt om man inte ens vill lära sig...
Hehe, jo jag vet! Men vi alla kommer väll i en fas någon gång då man verkligen inte har ork till att lära sig något utan bara vill att det ska fungera.
Men tack för hjälpen nu funkar det perfekt!:)
Okej, hoppas du inte ser mig som allt för jobbig nu. Men jag har fortfarande ett problem med det här scriptet. Jag har en select lista i formuläret i FancyUpload koden. Men oavsett vad jag väljer för värde så skickas alltid det överst värdet med, inte det värdet jag valt. Det är inget fel på select listan utan det måste vara något annat.
Jag skulle vara riktigt tacksam för svar.
Du måste ladda om sidan när du valt ett nytt värde i rullistan, då fungerar det..
T.ex. såhär:
<select name="min_lista" onchange="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>?album=' + this.options[this.selectedIndex].value;">
<option../>
</select>
Sidan kommer då att laddas om till t.ex. ladda_upp.php?album=2. I din phpfil när du genererar listan med album får du kolla om $_GET['album'] finns och isf. sätta rätt option till selected="selected".
Jag är osäker på varför det är såhär, men förmodligen har det med MooTools att göra, att koden inte kan uppdateras om man ändrar värde i listan "på vanligt sätt".
Tack så mycket, nu verkar allt funka.:)
