NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
katrincsak
Člen
Avatar
katrincsak:18.10.2015 16:00

Zdravím,

strávil jsem dost času, abych se naučil základy JavaScriptu a dokázal za pomocí JSON komunikovat s PHP. A i když už toto jsem schopný, jsem stále tam kde jsem byl.

Potřebuji upravit velikost fotky ještě před nahrátím, aby ten kdo nahrával třeba 5MB fotku, tak nenahrával skutečně 5MB. Ale aby se fotka již v klientovi upravila a nahrála se značně menší velikost.

Kod je velice jednoduchý a zatím testuji s jednou fotkou.
Nacházím samé zmenšení canvas, ale to je jenom náhled, nebo nevím. Jsem už jenom kousek od toho co potřebuji a schází mi proces na resize v javascriptu :-(

Kod byl už asi 50x předělávan a tak se omlouvám za chyby.

index.php

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Upload</title>
    <style>
    .container {
        width: 500px;
        margin: 0 auto;
    }
    .progress_outer {
        border: 1px solid #000;
    }
    .progress {
        width: 20%;
        background: #DEDEDE;
        height: 20px;
    }
    </style>
</head>
<body>
    <div class='container'>
        <p>
            Select File: <input type='file' id='_file' multiple /> <input type='button' id='_submit' value='Upload!'>
                        Text: <input type='text' id='_name'>
        </p>
        <div class='progress_outer'>
            <div id='_progress' class='progress'></div>
        </div>
    </div>
    <script src='nahrajFotku.js'></script>
</body>
</html>

JavaScript:

function resize(){
        upload();
}
function upload(){

    if(_file.files.length === 0){
        return;
    }

    var data = new FormData();
        //_file = resize(_file);
    data.append('SelectedFile', _file.files[0]);
        data.append('name', _name.value);

    var request = new XMLHttpRequest();
    request.onreadystatechange = function(){
        if(request.readyState == 4){
            try {
                var resp = JSON.parse(request.response);
                                alert("Vše ok");
            } catch (e){
                var resp = {
                    status: 'error',
                    data: 'Chyba: [' + request.responseText + ']'
                };
            }
            console.log(resp.status + ': ' + resp.data);
        }
    };

    request.upload.addEventListener('progress', function(e){
        _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%';
    }, false);

    request.open('POST', 'form.php');
    request.send(data);
}

window.onload = function(){
        var _submit = document.getElementById('_submit'),
        _file = document.getElementById('_file'),
        _name = document.getElementById('_name'),
        _progress = document.getElementById('_progress');
        _submit.onclick = resize;
}

php komunikace

<?php
// Output JSON
function outputJSON($msg, $status = 'error'){
    header('Content-Type: application/json');
    die(json_encode(array(
        'data' => $msg,
        'status' => $status
    )));
}
$soubor = $_FILES['SelectedFile']['tmp_name'];
$soubor_name = $_FILES['SelectedFile']['name'];
$soubor_size = $_FILES['SelectedFile']['size'];
 
Odpovědět
18.10.2015 16:00
Avatar
Patrik Valkovič
Tvůrce
Avatar
Odpovídá na katrincsak
Patrik Valkovič:18.10.2015 16:08

Kód jsem nestuoval, ale na fotku můžeš definovat pomocí Canvasu Scale - http://www.w3schools.com/…as_scale.asp.
Z canvasu poté můžeš získat zpět data pomocí canvas.toDataUrl() - http://www.html5canvastutorials.com/…ge-data-url/.
Tyto data si můžeš poslat na server.

Editováno 18.10.2015 16:08
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
18.10.2015 16:08
Nikdy neumíme dost na to, abychom se nemohli něco nového naučit.
Avatar
katrincsak
Člen
Avatar
Odpovídá na Patrik Valkovič
katrincsak:19.10.2015 18:22

Díky moc za navedení, hodně mi to pomohl abych se chytil a i když to tak nevypadalo, tak se to točilo kolem canvas.

Konečně 5MB fotka nahraná za 20s s uměle sníženým uploadem na 20 až 50 KB/s. !!

Řešení:

  1. Jakmile se zná URL "canvas.toData­URL();" tak už to stačí jen poslat do PHP.
  2. URL je nutné decode -> Na místo $_POST['test'] přijde vaše URL.
<?php
$filteredData=substr($_POST['test'], strpos($_POST['test'], ",")+1);
$decocedData = base64_decode($filteredData);
?>
  1. Dále se s tím manipuluje jako s obyčejným souborem, který je potřeba uložit..
<?php
$fp = fopen('test.png', 'wb');
  fwrite($fp, $decocedData);
  fclose($fp );
?>

Je to samozřejmě jen testovací, bez ošetření a bez dalších nutností. Na víc to bere jen 1 soubor, ale základ je hotov ;-)

Editováno 19.10.2015 18:23
 
Nahoru Odpovědět
19.10.2015 18:22
Avatar
katrincsak
Člen
Avatar
katrincsak:19.10.2015 18:25

Mimochodem, kdyby se někomu hodilo umělé snížení rychlosti internetu kvůli testování, tak doporučuji!

http://www.netlimiter.com/download

 
Nahoru Odpovědět
19.10.2015 18:25
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.