圖像預覽無法正常工作

Question

我有這段代碼，它顯示上傳前的圖像，但它不能正常工作它顯示圖像，如果沒有高度或寬度設置，但如果我嘗試修復高度和寬度相同的尺寸它不正常工作

<?php 
echo '<input type="file" id="changeme" name="file" multiple/> 
    <div id="output"></div> 
    </div> 
    <div id="right"> 
    <script> 
    function fileload(e) 
    { 
     var files=e.target.files || e.dataTransfer.files 
     for (var i=0, f; f=files[i]; i++) 
     { 
      parsefile(f) 
     } 
    } 
    function parsefile(file) 
    { 
    var reader=new FileReader(); 
    reader.onload=function (e) 
    { 
     var output=document.getElementById("output"); 
     output.innerHTML +="<img src=" + e.target.result + " />"; 
    } 
    reader.readAsDataURL(file); 
    } 
    if(window.File && window.FileList && window.FileReader) 
    { 
     var fileselect=document.getElementById("changeme"); 
     fileselect.addEventListener("change", fileload); 
    } 
    </script>'; 
?> 

它工作正常，這樣一來，但是當我在圖片標籤中輸入一些尺寸一樣height="50"和width="50"圖像顯示不出來我還使用了圖像的CSS嘗試，但它也不起作用。 注意： - 我必須在PHP內部使用它的一些原因

Answer 1

我認爲這是因爲你不包括引號中的值到<img>標記。試試這個：

output.innerHTML +="<img src=\'" + e.target.result + "\' style=\'width: 50px; height: 50px;\' />"; 

注意轉義單引號，以避免在PHP echo

Answer 2

問題

output.innerHTML +="<img width=\'50\' height=\'50\' src=" + e.target.result + " />";

工作的罰款我。