如何做多圖像縮放，預覽和使用JavaScript

Question

上傳的形式

我需要的是一個表單中的圖片上傳：

<input type="file" id="files" name="pics[]" multiple /> 
<br> 
<output id="list"></output> 

我也讀了不少，包括：

1. Image resizing client-side with JavaScript before upload to the server
2. Show an image preview before upload
3. https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/

然後拿出一個解決方案，但它不工作：

<style> 
    .thumb { 
    height: 75px; 
    border: 1px solid #000; 
    margin: 10px 5px 0 0; 
    } 
</style> 



<script> 

function handleFileSelect(evt) { 
    var files = evt.target.files; 

    // Loop through the FileList and render image files as thumbnails. 
    for (var i = 0, f; f = files[i]; i++) { 

     // Only process image files. 
     if (!f.type.match('image.*')) { 
     continue; 
     } 


     var reader = new FileReader(); 

     // Closure to capture the file information. 
     reader.onload = (function(theFile) { 
     return function(e) { 

var img = document.createElement('img'); 
img.src = e.target.result; 
var canvas = document.createElement('canvas'); 

var MAX_WIDTH = 800; 
var MAX_HEIGHT = 600; 
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/png"); 

     // Render thumbnail. 
      var span = document.createElement('span'); 
      span.innerHTML = 
      [ 
      '<img class="thumb" src="', 
      dataurl, 
      '" title="', escape(theFile.name), 
      '"/>' 
      ].join(''); 

      document.getElementById('list').insertBefore(span, null); 
     }; 
     })(f); 

     // Read in the image file as a data URL. 
     reader.readAsDataURL(f); 
    } 
    } 

    document.getElementById('files').addEventListener('change', handleFileSelect, false); 

</script> 

也不會做調整，也不會做預覽。 但是，多個全尺寸圖片上傳仍然有效。

編輯： 它調整大小，並預覽。但是當我點擊提交表格後，全尺寸原始圖片仍然上傳。

我做錯了什麼？

Answer 1

提交完整尺寸的原始圖像是因爲您沒有更改圖像本身，而是創建新圖像。但<input[file]>仍然指向原始圖像。您可以忽略這些<input[file]>，而是可能通過隱藏的<input>字段在<form/>內提交已調整大小的圖像的dataUrl。

只需使用調整大小的圖像，將它們轉換爲base64 dataUrls，寫入表單中的一些隱藏輸入以提交。

var dataurl = canvas.toDataURL("image/png"); 

document.getElementById('hiddenInputForImage').value=dataurl;