javascript - 图像预览无法正常工作

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