js实现图片上传时本地预览（支持同时上传多张图片）

最新推荐文章于 2023-11-23 17:57:49 发布

键盘捕手

最新推荐文章于 2023-11-23 17:57:49 发布

阅读量510

点赞数

原文链接：https://blog.csdn.net/man_zuo/article/details/83115212?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159185574319724848355285%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=159185574319724848355285&biz_id=0&utm_medium=

版权

<html>
<head>
    <style>
    .picture{
          width: 600px;
          height: 600px;
          margin-left: 150px;
          border:1px solid #000;
      }
      #img_span img{
          width: 100px;
          height: 100px;
          margin-right: 20px;
          margin-top: 20px;

      }
    </style>
</head>
<body>
     <div class="picture">
            <span id="img_span">
                 <input id="file" class="filepath" onchange="changepic(this)" type="file"><br> 
            </span>
     </div>
</body>
<script>
        var i=0;
        function changepic(obj) {
            //首先插入一个图片标签，src属性为空，宽高设置为100px，暂时设为不可见
            document.getElementById("img_span").innerHTML+="<img src=\"\" id=\"show"+i+"\" width=\"200\" style=\"opacity: 0;\">"; 
            //调用getObjectURL函数，返回上传的图片的地址
            var newsrc=getObjectURL(obj.files[0]);
            document.getElementById('show'+i).src=newsrc;//将图片的路径设置为返回上传的图片的地址
            document.getElementById("show"+i).style.opacity=1;//将图片设置为可见
            i++;
        }
        //建立一个可存取到该file的url
        function getObjectURL(file) {
            var url = null ;
            // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        }
    </script>
</html>

转自：https://blog.csdn.net/man_zuo/article/details/83115212?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159185574319724848355285%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=159185574319724848355285&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v3~pc_rank_v3-1-83115212.first_rank_ecpm_v3_pc_rank_v3&utm_term=js%E5%A4%9A%E5%BC%A0%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0

键盘捕手

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现图片上传时本地预览（支持同时上传多张图片）

<html><head> <style> .picture{ width: 600px; height: 600px; margin-left: 150px; border:1px solid #000; } #img_span img{ width: 100px; height: 100px; .
复制链接

扫一扫