Autor Zpráva
okoun
Profil
Ahoj, použil jsem tento script vše funguje, ale potřebuji tam udělat další formulářové políčko pro input text což mi nejde, protože to neprojde tím ajaxem, umí prosím někdo upravit aby to vzalo i další _POST a ne jen to _FILES?
Děkuji

index.html
<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury @ DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

</script>

</head>


<body>
<h2>Nahrát soubor</h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="file" name="file1" id="file1"><br/>

Poslat odkaz na soubor emailem: <input type="text" size="50" name="email"> (více adres odělit středníkem)<br/>

  <input type="button" value="Nahrát soubor" onclick="uploadFile()">
  <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
  <h3 id="status"></h3>
  <p id="loaded_n_total"></p>
</form>
</body>
</html>

file_upload_parser.php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}
if(move_uploaded_file($fileTmpLoc, "upload/$fileName")){
    echo "$fileName upload is complete".$_POST['datum5'].'aaa';
} else {
    echo "move_uploaded_file function failed";
}

// toto bohuzuel nefunguje.....
echo $_POST['email'];
lionel messi
Profil
okoun:

Taktiež zdravím,

súhlasím, políčko pomenované email sa do Ajaxom nikam neposiela. Opýtam sa: Čo si vlastne vyskúšal, aby si to zmenil? V kóde, ktorý si sem dal, nejakú veľkú vlastnú iniciatívu nevidím.

Skúsim ťa na riešenie postupne naviesť. Prejdime si spolu JS súboru index.html. Nájdeme v ňom niekoľko vlastných funkcií, na vyriešenie tvojho problému nám postačí, ak sa budem venovať prvým dvom:

1. Funkcia pomenovaná lakonicky _ robí jedinú vec. Zostručňuje nám prístup k prvkom formulára. Všimni si, že používa notoricky známu metódu getElementById. Z toho vyplýva, že ak ju chceme použiť, musí mať daný element v HTML nastavený atribút id. Čiže by bolo fajn upraviť si políčko s e-mailom takto:
<input type="text" size="50" name="email" id="email">

2. Funkcia uploadFile robí presne to, čo od funkcie podobného mena očakávame. V zásade je otázne, či je celkom vhodné pliesť do nej aj niečo, čo už priamo s nahrávaním súboru nesúvisí, pre zjednodušenie však pri nej zostaneme. Na začiatok tejto funkcie si doplníme:

function uploadFile(){
    var email = _("email").value;
    var file = _("file1").files[0];

Týmto posunieme javascriptu obsah políčka s ID email do premennej pomenovanej email. Pokračujme o kúsok nižšie, kde tieto dáta pridáme k tým ktoré sa posielajú na server. Opäť vyznačím, čo si treba doplniť (z okolitých riadkov je dúfam zrejmé kam):

    var formdata = new FormData();
    formdata.append("email", email);
    formdata.append("file1", file);

A teraz by sa už políčko malo predať PHP skriptu.
okoun
Profil
Valmi děkujem, funguje!
okoun
Profil
lionel messi:
Bohužel jsem ještě narazil na problém se zaškrtávacím polem: <input type="checkbox" name="heslo" value="1" id="heslo">
Děje se mi to že je to pokaždé s hodnotou 1 i když není zaškrtnuto. Do scriptu jsem dal:
var heslo = _("heslo").value;
formdata.append("heslo", heslo);
Tomášeek
Profil
okoun:
U checkboxů se atribut value nepoužívá (ani neposílá), zaškrtnutí se kontrolluje pomocí .checked.
okoun
Profil
Tomášeek:
tak změna na var heslo = _("heslo").checked; nepomohla....
lionel messi
Profil
okoun:
Tomášeek:
tak změna na var heslo = _("heslo").checked; nepomohla....

Čo presne znamená nepomohla? Pod riadok s var heslo = _("heslo").checked; si dopíš console.log(heslo); a skontroluj konzolu, malo by to vypísať true, ak je políčko začiarknuté, inak false. Ak to píše napr. undefined, niečo je zle a v takom prípade by nám pomohla živá ukážka. Možno v konzole nájdeš zachytenú aj inú chybu.
okoun
Profil
lionel messi:
no znamená to že políčko je neustále jako true i když je odšrtnuté, když smažu řádek formdata.append("heslo", heslo); tak je zase furt false i když je zaškrtlé :)


tak se omlouvám ale funguje to, mám problém někde dál v php kodu....
okoun
Profil
tak celý problém je v tom že true není jako logické true ale jako textové true to samé je s false.....
lionel messi
Profil
okoun:
tak celý problém je v tom že true není jako logické true ale jako textové true to samé je s false.....

Áno, lebo JavaScriptová metóda append automaticky konvertuje boolean na reťazec, čo v praxi vyzerá tak, že dá hodnotu booleanu do úvodzoviek (zjednodušene povedané).

Skúsil by som to takto:

var heslo = (_("heslo").checked == true ? "true" : "");
formdata.append("heslo", heslo);

Vysvetlenie: Zmeníme hodnotu premennej heslo tak, aby v nej v prípade, že je políčko zaškrtnuté, bol reťazec "true" (ktorý sa nám následne v prípade potreby pri pretypovaní na boolean pretypuje správne na true), ale keď nie je zaškrtnuté, bude v nej prázdny reťazec. Ten sa pri pretypovaní na boolean (či už na strane JS alebo PHP) pretypuje na false. Malo by to pomôcť.

PS: Ak si sa s tým zápisom pomocou ? a : nestretol, doplním, že ide o tzv. ternárny operátor (odkaz ilustruje jeho použitie v PHP, ale rovnako funguje aj v JS).
Tomášeek
Profil
lionel messi:
Skúsil by som to takto:
A proč ne jednoduše _("heslo").checked.toString()?
lionel messi
Profil
Tomášeek:
lionel messi:
„Skúsil by som to takto:“
A proč ne jednoduše _("heslo").checked.toString()?

Pretože metóda toString skonvertuje boolean false na "false", a to sa v PHP prevedie na true. To robí už aj okounov terajší kód, a to zjavne nechce.

Ak mi niečo uniklo, tak sa ospravedlňujem.
Tomášeek
Profil
lionel messi:
Ak mi niečo uniklo, tak sa ospravedlňujem.
Ne, v pořádku, máš pravdu. Nevšiml jsem si v tom ternáru, že tam máš ? "true" : "" a ne ? "true" : "false".

a to sa v PHP prevedie na true.
Otázka i tak je, co s tím v PHP dělá. Při === porovnání se nic na nic převádět nebude :-)
Keeehi
Profil
Já bych to nechal v javascriptu textově a převod z textu na boolean bych dělal až při zpracování v PHP.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0