如何覆蓋<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

回答

相關問題