基于HTML实现多图上传预览功能

自己最近写了一个网页多图上传的脚本,感觉挺实用的,细节就不要说了,直接贴代码了~

head>
    style>
.PRo_img{
     margin-left:10px;
    margin-top:10px;
    width:300px;
    height: 300px;
    background-color: black;
     --border-radius:999em;
      overflow:hidden;
    float:left;
     --margin:5% 35%;
    posITion: relative;
}
.pro_img img{
     position: absolute;
    left: 50%;
    top:50%;
       transform: translate(-50%,-50%);
width: 100%}
.pro_img {
position:relative}
.pro_img input{
    position: absolute;
    width: 100%;
    height: 100%;
    margin:0;
    opacity:0;
    z-index: 100;
}
    /style>
    script tyPE="text/javascript" src="jquery.min.js">
    /script>
    script>
    name_pic=1;
function t1(o){
    //alert(name_pic);
    if(o==1 || name_pic!=1){
        VAR file="file"+o;
        var img="img"+o;
        var hid="hidden"+o;
        var aa="a"+o;
    }
else{
        var file="file"+name_pic;
        var img="img"+name_pic;
        var hid="hidden"+name_pic;
        var aa="a"+name_pic;
    }
        var docObj = document.getElementById(file);
        var imgObjPreview = document.getElementById(img);
        var hidden=document.getElementById(hid);
        // alert(hidden);
        if (docObj.files &
    &
 docObj.files[0]) {
            hidden.src=window.URL.createObjectURL(docObj.files[0]);
 //获取file文件的路径        hidden.onload=function(){
                var width=hidden.width;
                var height=hidden.height;
                var a=document.getElementById(aa);
                    if(width>
height){
                    imgObjPreview.style.cssText='width:100%';
   //重写css样式                }
else{
                    imgObjPreview.style.cssText='height:100%;
    width:auto;
    ';
                                  }
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            imgObjPreview.style.display = 'block';
        }
    }
else{
            return false;
    }
    if(o==name_pic){
            var count=$('.pro_img').length;
        if(count6){
            name_pic++;
        var pic_div="a class='pro_img' id='a"+name_pic+"' >
    input type='file' id='file"+name_pic+"'  accept='image/*' multiple='multiple' name='pic[]' onchange='t1("+name_pic+")'/>
    img src='upload.jpg' id='img"+name_pic+"'>
    /a>
    img  id='hidden"+name_pic+"' style='display:none;
    '>
    ";
        $('#upload').append(pic_div);
     }
       }
}
    /script>
    /head>
    !-- multiple='multiple' -->
    form action="http://192.168.0.7/index.php/Home/Pic/upload" enctype="multipart/form-data" method="post">
    div id='upload'>
    a class='pro_img' id='a1' >
    input type='file' id='file1'  accept='image/*' multiple='multiple' name='pic[]' onchange='t1(1)'/>
    img src='upload.jpg' id='img1'>
    /a>
    img  id='hidden1' style='display:none;
    '>
    /div>
    input type='submit' value="上传" />
    /form>
    

自己替换一些upload.png这张图片就能达到自己的需求,如果说图片点击没反应,别忘了加入jquery

以上所述是小编给大家介绍的基于HTML实现多图上传预览功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！