在提交給PHP上傳之前在客戶端調整圖像大小

我正在使用這個從here的JavaScript庫來調整客戶端的圖像大小。我已經成功地調整客戶端上的圖像與此代碼：

document.getElementById('foto_select').onchange = function(evt) { 
 
    ImageTools.resize(this.files[0], { 
 
    width: 623, // maximum width 
 
    height: 203 // maximum height 
 
    }, function(blob, didItResize) { 
 
    // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob') 
 
    document.getElementById('preview').src = window.URL.createObjectURL(blob); 
 
    var hidden_elem = document.getElementById("foto"); 
 
    hidden_elem.value = window.URL.createObjectURL(blob); 
 
    // you can also now upload this blob using an XHR. 
 
    }); 
 
};

<script src="https://gist.githubusercontent.com/dcollien/312bce1270a5f511bf4a/raw/155b6f5861e844310e773961a2eb3847c2e81851/ImageTools.js"></script> 
 

 

 
<form action="save.php?p=edit_headline" method="post" enctype="multipart/form-data"> 
 

 
<div align="center"> 
 
    <input type="file" id="foto_select" name="foto_select" /> 
 
    <input type="hidden" id="foto" name="foto" /> 
 
    <div class="spacer-20"></div> 
 
    Preview : <br/> 
 
    <img id="preview" width="240" height="240" /> 
 
</div> 
 

 
</form>

好，圖像上傳成功並在客戶端得到調整大小。但問題是我需要將存儲在客戶端表單中的文件提交到php服務器端處理。 BLOB數據存儲在名爲foto的隱藏輸入中。

這裏是我的PHP代碼：

<?php 
 

 
    $imgFile = $_FILES['foto']['name']; 
 
    $tmp_dir = $_FILES['foto']['tmp_name']; 
 
    $imgSize = $_FILES['foto']['size']; 
 

 
    $upload_dir = '../admin/images/headline/'; // upload directory 
 

 
    $imgExt = strtolower(pathinfo($imgFile, PATHINFO_EXTENSION)); // get image extension 
 

 
    // valid image extensions 
 
    $valid_extensions = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions 
 

 
    // rename uploading image 
 
    $photo = rand(1000, 1000000) . "." . $imgExt; 
 

 
    // allow valid image file formats 
 
    if (in_array($imgExt, $valid_extensions)) { 
 
     // Check file size '5MB' 
 
     if ($imgSize < 5000000) { 
 
      move_uploaded_file($tmp_dir, $upload_dir . $photo); 
 
     } else { 
 
      $errMSG = "Sorry, your file is too large."; 
 
      echo "<script>alert('File foto terlalu besar'); window.location ='berita.php' </script>"; 
 
     } 
 
    } else { 
 
     $errMSG = "Sorry, only JPG, JPEG, PNG & GIF files are allowed."; 
 
    } 
 

 
    if (empty($imgFile)) { 
 
     $photo_save = $foto_old; 
 
    } else { 
 
     $photo_save = $photo; 
 
     unlink("images/headline/". $foto_old); // upload directory 
 
    } 
 

 
    $query = mysqli_query($con, "UPDATE `headline` SET `photo` = '$photo_save' WHERE `id` = '$id'"); 
 
    if ($query) { 
 
     echo "<script>alert('Headline Updated'); window.location ='index.php' </script>"; 
 
    } else { 
 
     echo "<script>alert('Failed'); window.location ='index.php' </script>"; 
 
    } 
 

 
?>

照片在MySQL數據庫更新，但該文件沒有得到來自客戶端輸入表單服務器文件夾複製目的地。

我需要幫助解決這個問題，我可能會避免使用XHR/AJAX方法，因爲它會改變整個代碼。任何幫助都感激不盡。

在此先感謝。

來源

2017-05-29 M Ansyori

既然你有BLOB字段的文件，只是使用file_put_contents功能將文件數據保存到所需的目標像

file_put_contents('/path/to/new/file_name', $_POST['foto']);

無需對整個move_uploaded_file部分。只需將其視爲正常請求，並使用foto字段中的值來保存圖像。

來源

2017-05-29 19:25:20 gaganshera

好吧，讓我試試。謝謝。 –

但輸入表單怎麼樣？我是否需要將隱藏的輸入類型更改爲其他內容以提交文件？ –

不，隱藏字段的提交方式與非隱藏字段相同。 – gaganshera

在提交給PHP上傳之前在客戶端調整圖像大小

回答

相關問題