input 上传多张图片前端界面js交互

亦凉 2022-05-29 12:42 182阅读 0赞

<!DOCTYPE html>
    <html>
    
    
     <head>
     <meta charset="UTF-8">
    
    
     <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
     <link rel="stylesheet" href="css/bootstrap.css" />
    
    
     <style type="text/css">
     .imgdiv {
     width: 100%;
     height: 200px;
     margin: 10px;
     }
     
     img {
     width: 20%;
     height: 100%;
     padding: 5px;
     }
     
     input {
     margin: 10px;
     }
     </style>
    
    
     <script>
     var  flag=0;
     $(function() {
     $("#upload").change(function() {
     flag=flag+1;
     if(flag>5) return;
     var path= getImgPath(this.files[0]);
     console.log("--------"+path);
     uploadImg(path);
     });
    
    
     });
     
               //动态显示上传图片
     function uploadImg(path) {
     
     var imgDiv = $("#img-con");
    
    
     var $img = $("<img/>");
    
    
     $img.attr("src", path);
    
    
     imgDiv.append($img);
     }
    
    
    
    
               //获取要上传单张图片的本地路径
     function getImgPath(file) {
    
    
     var url = null;
     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>
    
    
     <title>文件上传</title>
     </head>
    
    
     <body>
    
    
     <div id="img-con" class="panel panel-default imgdiv">
    
    
     </div>
    
    
     <div>
     <span><input type="file" id="upload" />最多上传5张</span>
     
     </div>
    
    
     </body>
    
    
    </html>

![20180323231104657][]

下一篇讲解使用springmvc上传多张图片

[20180323231104657]: /images/20220529/2e166c80422a45798ebdf886c74ace7c.png