Javascript 在运行时更改src后，HTML不呈现img_Javascript_Html_Image_File

Javascript 在运行时更改src后，HTML不呈现img

javascript html image file

Javascript 在运行时更改src后，HTML不呈现img,javascript,html,image,file,Javascript,Html,Image,File,我有以下代码- <html> <head> <script> function myFunction() { var x = document.getElementById("myFile"); alert(x.value); document.getElementById("picture").src=x.value; } </script> </hea

我有以下代码-

<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:\Users\Shin\Desktop\410.svg">
</body>
</html>

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

你需要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]);
};

试试这个

  <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:\Users\rajpc\Pictures\1390.jpg">
</body>
</html>

这肯定有用。。。。根据需要更改您的img src。。

我希望这会对您有所帮助……

当我在ie10中运行当前代码时，它似乎可以很好地工作，我选择的图像文件是jpg或png。但是当我开始使用.svg文件时，我就遇到了问题。一些浏览器有一个安全功能，防止javascript知道文件的本地完整路径。有时它会返回一个名为fakepath的东西。你可以搜索它。。这很有意义——作为客户机，您不希望服务器知道本地机器的文件系统。如果所有浏览器都这样做就好了。为了摆脱这个问题，你必须使用这个代码。。