0

When recording the image on the server I needed on the client side to resize the image and overwrite the contents of the <input type = "file" ... a picture of the new resized.

That is to prevent the server transmitted unnecessarily large files

DESCRIPTION: After selecting a file I get reduced preview of the file. I need to transfer the file reduced after pressing the button ODOSLAT. It should be reflected in kontrola.php.

Can someone give me an advise how to achieve this?

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>change input file</title>

</head>
<body>

<br />
<form method="post" action="kontrola.php" enctype="multipart/form-data">
<input type="file" name="obr1" id="idobr1" onchange="handleFiles()" /><br /><br />
<img src="" id="image_obr1" /><!-- here is perspective view  -->
<br /><br /><br /><br />
<input type="submit" name="odoslat" value="ODOSLAT" /><br />

</form>



<script>

function handleFiles()
{
    var filesToUpload = document.getElementById('idobr1').files;
    var file = filesToUpload[0];

    var img = document.createElement("img"); // Create an image
    var reader = new FileReader();           // Create a file reader
    reader.onload = function(e)              // Set the image once loaded into file reader
    {
        img.src = e.target.result;

        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        var MAX_WIDTH = 421;
        var MAX_HEIGHT = 316;
        var width = img.width;
        var height = img.height;

        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
          }
        } else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
          }
        }
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);

        var dataurl = canvas.toDataURL("image/jpg");
        document.getElementById('image_obr1').src = dataurl;     
    }
    // Load files into file reader
    reader.readAsDataURL(file);
}
</script>


</body>
</html>

CODE kontrola.php :

<?php

// kontrola.php

if (isset($_POST['odoslat'])) {

    $chyba1='';

    $chyba1 = $_FILES['obr1']['size'];
    echo 'velkost = ' ,$chyba1 . '<br /><br />'; // here should be new resized image

}

?>
František Hokej
  • 3
  • 3

2 Answers2

0

You cant do this for security reasons.

check this , and this

attributes with read-only cannot be changed.

Community
  • 1
  • 1
ProllyGeek
  • 15,517
  • 9
  • 53
  • 72
0

This hack is kind of funny its possible. You can add a data attribute like data-name="image" to the file input

Then if you want to clear ( actually ignore on form submit ) the files uploaded, you can do $('#id_image').attr('name', '').

Then on $('#id_image') change event, re-instate its name attribute using the data-name attribute's value

(function($) {
  $('#clear-file').click(function(evt) {
    evt.preventDefault()
    
    $('#file').attr('name', '')
  })
  
  $('#file').change(function() {
    $(this).attr('name', $(this).data('name'))
  })
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="file" type="file" data-name="file">
<a id="clear-file" href="#">Clear</a>
Windel Oira
  • 11
  • 1