Question

在客户端需要的服务器上录制图像以调整图像大小并覆盖＆lt; input type =“file”的内容......新调整大小的图片。

那是为了防止服务器传输不必要的大文件

描述：选择文件后，我会减少文件的预览。按下ODOSLAT按钮后，我需要传输文件。它应该反映在kontrola.php中。

有人可以告诉我如何实现这个目标吗？

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

}

?>

Answer 1

出于安全原因，你无法做到这一点。

检查this和this

只读属性无法更改。

如何覆盖的内容

1 个答案: