图像预览无法正常工作

Question

i have this code which shows image before uploading but it is not working properly it shows image if there is no height or width set but if i try to fix height and width to same dimensions it doesn't works properly

<?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>';
?>

it works fine this way but when i enter some dimensions like height="50" and width="50" in image tag the image doesn't show up i also tried using css for image but it also doesn't work. NOTE:- i have to use it inside php for some reasons

Answer 1

I think it's because you don't wrap in quotes the values into <img> tag. Try this:

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

Note the escaped single quotes to avoid problems in PHP echo