首先:将服务器接收的本地照片发布到iis服务器上,比如本例中是将存放图片的文件夹发布到192.168.2.204:9015

      前端js如何展示服务端保存到本地的照片(接收客户端上传的照片)

其次:

前端代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>ImgTest</title>
    <meta charset="utf-8">
</head>
<body>
<div style="width:400px;height:300px;overflow:hidden;">
    <img id="image" src="" οnlοad="this.style.marginTop=500-this.height;this.style.marginLeft=500-this.width;" />
</div>
<script type="text/javascript">
    window.οnlοad=function()//用window的onload事件,窗体加载完毕的时候
    {
        setInterval(function code()
        {
            var imgUrl = "http://192.168.2.204:9015/img/1.bmp";

            document.getElementById('image').src = imgUrl;
            
        },2000);
    }
</script>
</body>
</html>

如果希望前端能够动态显示文件夹下的图片,只需要将<script>标签内的 var imgUrl = "http://192.168.2.204:9015/img/1.bmp";改成自己想要的显示顺序,比如:

<script type="text/javascript">
    window.οnlοad=function()//用window的onload事件,窗体加载完毕的时候
    {
        var i = 1;
        setInterval(function code()
        {
            var imgUrl = "http://192.168.2.204:9015/img/" + i + ".bmp";

            document.getElementById('image').src = imgUrl;
            
            i++;
        },2000);
    }
</script>改写后,前端会逐个显示文件夹下的图片

调试结果如下:

前端js如何展示服务端保存到本地的照片(接收客户端上传的照片)

 

相关文章:

  • 2022-02-09
  • 2022-12-23
  • 2022-12-23
  • 2021-09-29
  • 2022-12-23
  • 2021-08-27
  • 2021-09-27
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-05-21
  • 2021-07-26
  • 2022-12-23
  • 2021-09-05
  • 2022-01-15
  • 2022-12-23
相关资源
相似解决方案