HTML在运行时更改src后没有呈现img

我有以下代码-

<html>
<head>
<script>
    function myFunction() 
    {
         var x = document.getElementById("myFile");
         alert(x.value);
         document.getElementById("picture").src=x.value;
    }
    </script>
</head>
<body>
    <input type="file" id="myFile"><br>
    <button onclick="myFunction()">Render this</button>
    <img id="picture" src="C:UsersShinDesktop410.svg">
</body>
</html>

最初它显示的是图像，在我选择另一个文件并单击按钮后，它会完美地向我显示警报框中的路径，但它不会渲染新的图片，并且当src不正确时，它会在图像中显示一个红十字。我用的是chrome浏览器。

试试这个。。。

  <html>
  <head>
  <script>
  function myFunction() 
  {
  var input = document.getElementById("myFile");
  var fReader = new FileReader();
  fReader.readAsDataURL(input.files[0]);
  fReader.onloadend = function(event){
  var img = document.getElementById("picture");
  img.src = event.target.result;
  }  
  }
  </script>
</head>
<body>
  <input type="file" id="myFile"><br>
  <button onclick="myFunction()">Render this</button>
  <img id="picture" src="C:UsersrajpcPictures1390.jpg">
</body>
</html>

这肯定行得通。。。。根据需要更改img src。。我希望这对你有所帮助。。。。

您需要URL.createObjectURL:

url=URL.createObjectURL(x[0]);

要读取本地文件，您需要使用FileReader Api。

function myFunction() {
    var reader = new FileReader();
    reader.onload = function(e) {
        document.getElementById("picture").src = reader.result;
    };
    reader.readAsDataURL(document.getElementById("myFile").files[0]);
};

相关内容

最新更新

热门标签：