如何覆盖<input type =“file”的内容...使用Javascript

当在服务器上记录图像时，我需要在客户端调整图像大小并覆盖< input type =“文件“...新的调整大小的图片。如何覆盖<input type =“file”的内容...使用Javascript

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

描述：选择一个文件后，我就减少了文件的预览。我需要在按下按钮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 

} 

?>

来源

2014-11-24 František Hokej

你不能出于安全原因，做到这一点。

检查this，并与this

属性只读不能改变。

来源

2014-11-24 20:10:07 ProllyGeek

是否有可能创建一个 2014-11-24 20:38:53

如果没有手动用户操作，您永远无法提交文件（按提交按钮） – ProllyGeek 2014-11-25 03:05:41

如何覆盖<input type =“file”的内容...使用Javascript

回答

相关问题