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

最新推荐文章于 2024-04-22 15:13:44 发布

Jjb125

最新推荐文章于 2024-04-22 15:13:44 发布

阅读量2.3k

点赞数 2

分类专栏： JavaScript 文章标签：服务器保存照片 js html 动态显示本地照片

本文链接：https://blog.csdn.net/Jjb125/article/details/89954529

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

其次：

前端代码如下：

<!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";改成自己想要的显示顺序，比如：

           document.getElementById('image').src = imgUrl;

           i++;
       },2000);
   }
</script>改写后，前端会逐个显示文件夹下的图片

调试结果如下：