[PHP] Userfriendly uploaden van images

[Isegrimm]

Helleu, ik ben bezig met een documentatie-script, gebruikers kunnen hierin teksten opnemen om bepaalde processen te beschrijven en meer van die ongein.
Nu is het vaak wel handig om daar wat screenshots bij te laten zien, dus ik wil er iets inbouwen zodat gebruikers plaatjes kunnen uploaden en in de tekst kunnen zetten. Op dit forum gebeurt dat middels [ img ]-tags, maar mijn gebruikers zijn over het algemeen redelijke noobs en zijn gewend aan copy/paste...

Wat zou volgens jullie de makkelijkste manier zijn? Copy en paste is niet mogelijk natuurlijk, maar misschien iets anders zodat het voor gebruikers toch makkelijk is...
Ik heb zelf al zitten denken aan zoiets als dit:
- tekst wordt ingevoerd in de database
- gebruikers uploaden plaatjes in een apart form
- vervolgens gaan ze terug naar het teksteditform, daar zien ze de tekst staan, en daaronder aanklikbare thumbnails van alle plaatjes
- zodra ze een plaatje aanklikken, wordt middels javascript oid een [ img ]-achtige tag met een verwijzing naar het aangeklikte plaatje in de tekst gezet op de plek van de cursor

Zou wel kunnen werken zo, maar ik vind het eigenlijk nog te omslachtig, heeft iemand suggesties hiervoor?

[Verwijderd]

De oplossing die jij naar voren schuigt kan in prinipe wel werken. Als je het goed presenteert is het niet omslachtig imo. Gewoon een plaatjes uploader maken en een aparte page voor de teksten. Moet je wel oppassen dat je misschien de boel in categorien moet indelen als je teveel plaatjes krijgt in de db.

Maar als mensen kunnen copy/pasten lijkt het me niet moeilijk om boven de textarea ff een korte uitleg te geven van BB-code ofzo. Dat is toch wel goed te begrijpen ook voor noobs.

[Verwijderd]

contenteditable div misschien? In popup plaatje uploaden naar server en gewoon uit die popup de <img> code terugsturen naar het divje? Dan staat het plaatje er WYSIWYG in..

[Verwijderd]

Verwijderd schreef op 26 november 2002 @ 11:41:
De oplossing die jij naar voren schuigt kan in prinipe wel werken. Als je het goed presenteert is het niet omslachtig imo. Gewoon een plaatjes uploader maken en een aparte page voor de teksten. Moet je wel oppassen dat je misschien de boel in categorien moet indelen als je teveel plaatjes krijgt in de db.

PHP:

function make_name()
{
srand((double)microtime()*1000000); 
$length=8;
$all= "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for($i=0;$i<$length;$i++) 
{ $randy=rand(0, strlen($all)); $pass.=$all[$randy]; }
return $pass;
}

Hiermee kan je een HOOP plaatjes op je schijf opslaan hoor En je database kan ook flink doornummeren.... ik zie er geen problemen

[Isegrimm]

Verwijderd schreef op 26 November 2002 @ 11:41:
De oplossing die jij naar voren schuigt kan in prinipe wel werken. Als je het goed presenteert is het niet omslachtig imo. Gewoon een plaatjes uploader maken en een aparte page voor de teksten. Moet je wel oppassen dat je misschien de boel in categorien moet indelen als je teveel plaatjes krijgt in de db.

Maar als mensen kunnen copy/pasten lijkt het me niet moeilijk om boven de textarea ff een korte uitleg te geven van BB-code ofzo. Dat is toch wel goed te begrijpen ook voor noobs.

De plaatjes gaan zowiezo ingedeeld worden, ik denk aan een aparte folder op de schijf per document of zo, waarbij de foldernaam == document_id, dit om de kans op dubbele namen te vermijden. En dan een aparte tabel voor alle attachments (want die komen er ook in, zoals .doc-files) en plaatjes, die tabel ziet er dan een beetje zo uit: att_type (file of img), att_id (autoincrementing int), att_name (lijkt me duidelijk) en att_applies_to (het document-id waarop het van toepassing is)
In de tekst van het document staat dan een verwijzing naar att_id ipv bijv. "images/doc_23/img4.jpg". Ik denk dat het dan wat makkelijker te managen is, want ik wil er eventueel later nog een losse filemanager bijmaken, bijvoorbeeld om bestanden op te schonen die niet meer gebruikt worden.

Verwijderd schreef op 26 November 2002 @ 11:42:
contenteditable div misschien? In popup plaatje uploaden naar server en gewoon uit die popup de <img> code terugsturen naar het divje? Dan staat het plaatje er WYSIWYG in..

Nah, ik wil het liever zonder popups doen, dat vind ik er altijd zo sjabbie uitzien.

iig bedankt voor de reakties!

[ Voor 4% gewijzigd door Isegrimm op 26-11-2002 12:50 ]

[goalgetter]

Copy en paste is niet mogelijk natuurlijk, maar misschien iets anders zodat het voor gebruikers toch makkelijk is...

Copy/paste is zeker wel mogelijk... Zie www.dhcdrienerlo.nl op de frontpage (strip sectie) voor een voorbeeld. Enige nadeel is dat er wel gebruik moet worden gemaakt van IE om het te laten werken, maar voor zo'n documentatie systeem met een beperkte gebruikersgroep zou dat geen probleem mogen zijn.

[WhiskyPhreak]

Je kunt ook eens kijken naar http://trapleuning.homeip.net Daar is ook zo een soort pagina (als ik je bedoeling goed begrijp). Deze doet het ook in opera7

[goalgetter]

Wat jij bedoelt is gewoon een standaard browse knopje waarmee je een file selecteerd. Daarna wordt deze via een "standaard-fileupload" verwerkt. Natuurlijk werkt dat gewoon in Opera 7 (en alle andere browsers die HTML 4.01 compliant zijn).

De oplossing die ik hierboven poste is IMHO een veel elegantere (voor NOOBS) MITS je je gebruikersgroep kan dwingen een bepaalde browser te gebruiken.

[Isegrimm]

goalgetter schreef op 26 November 2002 @ 12:57:
[...]


Copy/paste is zeker wel mogelijk... Zie www.dhcdrienerlo.nl op de frontpage (strip sectie) voor een voorbeeld. Enige nadeel is dat er wel gebruik moet worden gemaakt van IE om het te laten werken, maar voor zo'n documentatie systeem met een beperkte gebruikersgroep zou dat geen probleem mogen zijn.

IE is geen probleem, voor zover ik weet werken alle gebruikers hiermee. Dit is inderdaad interessant script wat ze daar gebruiken. Effe zoeken of ik ergens de source kan vinden D'r wordt daar iig wel een php aangeroepen.

[goalgetter]

Je kan natuurlijk ook gewoon vragen of ik die source ter beschikking wil stellen he

Het is een combinatie van Javascript (om de past om te zetten naar een fileupload) en een PHP script om de fileupload zelf af te handelen.

[Isegrimm]

goalgetter schreef op 26 November 2002 @ 13:04:
Wat jij bedoelt is gewoon een standaard browse knopje waarmee je een file selecteerd. Daarna wordt deze via een "standaard-fileupload" verwerkt. Natuurlijk werkt dat gewoon in Opera 7 (en alle andere browsers die HTML 4.01 compliant zijn).

De oplossing die ik hierboven poste is IMHO een veel elegantere (voor NOOBS) MITS je je gebruikersgroep kan dwingen een bepaalde browser te gebruiken.

Naja, ik wil dus eigenlijk iets hebben waardoor gebruikers dat upload-knoppie niet zien, dus meer transparant voor de gebruiker.
Gelukkig is er maar 1 browser in gebruik, dus hoef ik op dit moment niet echt rekening te houden met andere.

[Isegrimm]

goalgetter schreef op 26 november 2002 @ 13:11:
Je kan natuurlijk ook gewoon vragen of ik die source ter beschikking wil stellen he

Het is een combinatie van Javascript (om de past om te zetten naar een fileupload) en een PHP script om de fileupload zelf af te handelen.

Hey, maar dat komt even goed uit
Zou ik even dat stukje programmeerwerk mogen bekijken?

[ Voor 6% gewijzigd door Isegrimm op 26-11-2002 13:20 ]

[Isegrimm]

foutje...

[ Voor 95% gewijzigd door Isegrimm op 26-11-2002 13:19 ]

[goalgetter]

Het stukje javascript:

code:

function formSubmit()
{
  if(!form.image.value && !form.paste_image.value)
  {
    alert('Zoek een bestand door op \'browse\' te klikken!');
    return;
  }
  form.submit();
  window.close();
}

function paste()
{
  document.frames('test').document.body.innerText='asd';
  var r = document.frames('test').document.body.createTextRange();
  r.findText('asd');
  r.select();
  document.frames('test').document.execCommand('paste')
  text = document.frames('test').document.body.innerHTML;
  pos = text.indexOf('src=');
  temp_link = text.substr(pos+5,200);
  pos = temp_link.indexOf('\"');
  link = temp_link.substring(0,pos);
  form.paste_image.value = link;
  pos_name = link.lastIndexOf(\"/\");
  name = link.substring(pos_name+1,pos);
  form.paste_image_name.value = name;
  if(!form.paste_image.value)
  {
    alert('Er is geen plaatje aanwezig in het geheugen!');
    return;
  }
  formSubmit();
}

Zoals je ziet maakt dit dus gebruik van een frame (in dit geval een i-frame met width/height = 0) Het plaatje wordt in het frame gepaste, en daarna via het script gesubmit.

Succes ermee!

[Isegrimm]

Thanx!