图片预览无法正常工作

时间:2016-03-17 09:48:44

标签: javascript php html css

我有这个代码在上传之前显示图像但是它没有正常工作它显示图像如果没有设置高度或宽度但是如果我尝试将高度和宽度固定到相同的尺寸它不能正常工作< / p>

<?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作为图像,但它也没有#&# 39;工作。 注意: - 由于某些原因,我必须在php中使用它

2 个答案:

答案 0 :(得分:1)

我认为这是因为您没有将值引用到viewpager标记中。试试这个:

<img>

请注意转义的单引号以避免PHP output.innerHTML +="<img src=\'" + e.target.result + "\' style=\'width: 50px; height: 50px;\' />";

中出现问题

答案 1 :(得分:0)

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

对我来说很好。