Få ut sökvägen till uppladdad bild? - jQuery/php

Citera flera Citera

2012-12-17 10:12

Leedow

Medlem ★

Plats: Falun
Registrerad: Dec 2003

●

Skrivet av Blargmode:

Godkväll gott folk!
Jag håller på med en hemsida där jag har integrerat en drag-and-drop uppladdningsfunktion, denna för att vara specifik: http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/

Men jag lyckas inte få ut filnamnet på den uppladdade bilden?

Skulle vara jättenajs om någon lite kunnigare än jag rotade fram hur jag åstadkommer detta

Det beror ju helt på vad du vill göra med sökvägen.
Om du ska göra något med sökvägen i PHP så har du ju sökvägen så fort det blir en FILE-resource.
Om du ska presentera det på sidan så måste du skicka datat vidare till klienten.

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Citera flera Citera

2012-12-17 15:49

Blargmode

Entusiast

Registrerad: Sep 2011

●

Skrivet av Leedow:

Det beror ju helt på vad du vill göra med sökvägen.
Om du ska göra något med sökvägen i PHP så har du ju sökvägen så fort det blir en FILE-resource.
Om du ska presentera det på sidan så måste du skicka datat vidare till klienten.

Mörkt tema till sweclockers | Taklampa med socket 1155

I slutändan ska jag ha en knapp som kopierar bildens url till clipboarden, så basically ska jag presentera datan på sidan.

Vet du hur jag ska gå tillväga för att göra det?

Visa signatur

Citera flera Citera

2012-12-17 16:11

Leedow

Medlem ★

Plats: Falun
Registrerad: Dec 2003

●

Skrivet av Blargmode:

I slutändan ska jag ha en knapp som kopierar bildens url till clipboarden, så basically ska jag presentera datan på sidan.

Vet du hur jag ska gå tillväga för att göra det?

Ja och nej. Det krävs lite extra kod men innan vi går in på själva lösningen så vill jag bara försäkra mig om vad du söker.

Det finns totalt fem stycken faktiska sökvägar.

1. Sökvägen till filen, som klienten/användaren laddade upp, på sin hårddisk.
2. Sökvägen till filen när den är uppladdad på servern i en temporär uppladdningsmapp.
3. Sökvägen till filen när den är flyttad till korrekt mapp på servern.
4. Både sökväg 2 och 3 har även extra "sökvägar" (URL i detta fall) om det är så att deras mappar finns i den publika web-rooten för din sida.

Sökvägen 2,3 och 4 kan man skriva ut. Sökväg nummer 1 går inte att få reda på eller påverka på något vis från servern.

I och med det så hoppas jag att det inte är sökväg nummer 1 du är ute efter.

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Citera flera Citera

2012-12-17 16:42

Blargmode

Entusiast

Registrerad: Sep 2011

●

Skrivet av Leedow:

Ja och nej. Det krävs lite extra kod men innan vi går in på själva lösningen så vill jag bara försäkra mig om vad du söker.

Det finns totalt fem stycken faktiska sökvägar.

1. Sökvägen till filen, som klienten/användaren laddade upp, på sin hårddisk.
2. Sökvägen till filen när den är uppladdad på servern i en temporär uppladdningsmapp.
3. Sökvägen till filen när den är flyttad till korrekt mapp på servern.
4. Både sökväg 2 och 3 har även extra "sökvägar" (URL i detta fall) om det är så att deras mappar finns i den publika web-rooten för din sida.

Sökvägen 2,3 och 4 kan man skriva ut. Sökväg nummer 1 går inte att få reda på eller påverka på något vis från servern.

I och med det så hoppas jag att det inte är sökväg nummer 1 du är ute efter.

Mörkt tema till sweclockers | Taklampa med socket 1155

Det är punkt 3 jag är ute efter, ex: "http://webbsida.se/bilder/bild.jpg". Det jag skulle använda för att t.ex lägga in bilden här i det här inlägget

Visa signatur

Citera flera Citera

2012-12-17 19:25

Leedow

Medlem ★

Plats: Falun
Registrerad: Dec 2003

●

Skrivet av Blargmode:

Det är punkt 3 jag är ute efter, ex: "http://webbsida.se/bilder/bild.jpg". Det jag skulle använda för att t.ex lägga in bilden här i det här inlägget

Då är det nummer 4 du är ute efter. Alltså att det blir en URL av den färdiga placeringen av bilden.
På en webbserver så finns det en intern sökväg och en extern sökväg.

Den interna sökvägen är i en Windowsbaserad miljö, exempelvis: file://C:/Webb/bilder/bild.jpg
Den externa sökvägen är en virtuell sökväg som bestäms av webbservern med hänsyn till din virtuella mapp. Den kan vara som du säger, "http://webbsida.se/bilder/bild.jpg". Båda av dessa sökvägarna är korrekta men bara den externa kan man komma åt utifrån den interna gäller från samma system/lokalt.

Jag är inte så insatt i hur API:t fungerar och vad man måste göra för att lägga till det på "korrekt" sätt.
För att lösa det lite snabbt så kan du ju skriva den relativa sökvägen till mappen med hänsyn till din domän och konkatenera detta med filnamnet.

Ex:
Denna kod (som börjar på rad 14 i tutorialn)

uploadFinished:function(i,file,response){
	$.data(file).addClass('done');
	// response is the JSON object that post_file.php returns
},

...kan du ändra till:

var uploadPath = "uploads/";
uploadFinished:function(i,file,response){
	$.data(file).addClass('done');
	alert(window.location.host + "/" + uploadPath + file.name);
	// response is the JSON object that post_file.php returns
},

Här ser du även varför detta inte är den bästa varianten. Om du skulle ändra "$upload_dir"-variabeln i PHP så måste du ändra Javascriptvariabeln "uploadPath" också. Det bästa är om PHP hade returnerat den korrekta URL:en på en gång. Om inte detta duger så kan jag fixa det. Det kräver aningen mer kod.

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Citera flera Citera

2012-12-18 20:04

Blargmode

Entusiast

Registrerad: Sep 2011

●

Skrivet av Leedow:

Då är det nummer 4 du är ute efter. Alltså att det blir en URL av den färdiga placeringen av bilden.
På en webbserver så finns det en intern sökväg och en extern sökväg.

Den interna sökvägen är i en Windowsbaserad miljö, exempelvis: file://C:/Webb/bilder/bild.jpg
Den externa sökvägen är en virtuell sökväg som bestäms av webbservern med hänsyn till din virtuella mapp. Den kan vara som du säger, "http://webbsida.se/bilder/bild.jpg". Båda av dessa sökvägarna är korrekta men bara den externa kan man komma åt utifrån den interna gäller från samma system/lokalt.

Jag är inte så insatt i hur API:t fungerar och vad man måste göra för att lägga till det på "korrekt" sätt.
För att lösa det lite snabbt så kan du ju skriva den relativa sökvägen till mappen med hänsyn till din domän och konkatenera detta med filnamnet.

Ex:
Denna kod (som börjar på rad 14 i tutorialn)

uploadFinished:function(i,file,response){
	$.data(file).addClass('done');
	// response is the JSON object that post_file.php returns
},

...kan du ändra till:

var uploadPath = "uploads/";
uploadFinished:function(i,file,response){
	$.data(file).addClass('done');
	alert(window.location.host + "/" + uploadPath + file.name);
	// response is the JSON object that post_file.php returns
},

Här ser du även varför detta inte är den bästa varianten. Om du skulle ändra "$upload_dir"-variabeln i PHP så måste du ändra Javascriptvariabeln "uploadPath" också. Det bästa är om PHP hade returnerat den korrekta URL:en på en gång. Om inte detta duger så kan jag fixa det. Det kräver aningen mer kod.

Mörkt tema till sweclockers | Taklampa med socket 1155

Men du är ju underbar! Tackar så mycket

Har du lust så kan du ju visa den lite "snyggare" metoden men det behövs inte, detta duger gott och väl. Jag slänger bara in en kommentar i båda filerna om att man måste ändra båda ifall jag vill ändra det i framtiden.

Måste också nämna att du är nog den mest pedagogiska människa jag har stött på här, det är kul att du beskriver så pass mycket om det och inte bara kastar in ett svar, man lär sig mycket mer på det. Så tack för det också

Visa signatur

Citera flera Citera

2012-12-18 21:11

Leedow

Medlem ★

Plats: Falun
Registrerad: Dec 2003

●

Skrivet av Blargmode:

Men du är ju underbar! Tackar så mycket

Har du lust så kan du ju visa den lite "snyggare" metoden men det behövs inte, detta duger gott och väl. Jag slänger bara in en kommentar i båda filerna om att man måste ändra båda ifall jag vill ändra det i framtiden.

Måste också nämna att du är nog den mest pedagogiska människa jag har stött på här, det är kul att du beskriver så pass mycket om det och inte bara kastar in ett svar, man lär sig mycket mer på det. Så tack för det också

Det är just det jag strävar efter. Kul att det uppskattas.

För att få till det snyggt så vill vi att man bara ska behöva ändra i PHP gällandes vart den uppladdade filen ska placeras samt att sökvägen blir korrekt för URLen. För att göra detta så behöver vi ändra lite i Javascriptet och i PHP.

Först måste du bortse från den tidigare Javascriptkoden som jag skrev.

Ändra följande i Javascript-koden (rad 14)

uploadFinished:function(i,file,response){
	$.data(file).addClass('done');
	// response is the JSON object that post_file.php returns
},

till:

uploadFinished:function(i,file,response){
	$.data(file).addClass('done');
	// response is the JSON object that post_file.php returns
	alert(response.status);
},

Ändra följande i PHP-koden (rad 33)

if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
	exit_status('File was uploaded successfuly!');
}

till:

if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
	exit_status($upload_dir.$pic['name']);
}

Den bör alltså returnera ett JSON-objekt som har en property vid namn "status" satt till den relativa sökvägen för filen.

Varför jag inte skrev denna lösning på en gång var för att jag är inte helt bekväm med API:et för HTML5 än. Det kan vara så att man måste decode:a det som läses in av javascriptet från PHP till ett JSON-objekt först om det inte är så att det redan gjorts. Av att döma den redan existerande kommentaren så ser det ut som att detta redan är gjorts. Hur som helst så kanske detta inte fungerar vid första försöket.

Om jag ska vara helt ärlig så är det snyggast att ha absoluta sökvägar men då krävs det lite mera meck.

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?