Implementation of HTML multi-image upload preview function-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Implementation of HTML multi-image upload preview function

小云云

Dec 11, 2017 am 10:48 AM

html Function accomplish

Recently, I have been using the multi-image upload preview function on web pages, and I feel that it is quite good. Today, I took the time to share with you the implementation of the multi-image upload preview function based on HTML. I hope it can help everyone.

I recently wrote a script for uploading multiple images on a web page. I think it is quite practical. I won’t go into the details and just paste the code~

<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=&#39;width:100%&#39;;   //重写css样式
                }else{
                imgObjPreview.style.cssText=&#39;height:100%;width:auto;&#39;;                  
                }
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        imgObjPreview.style.display = &#39;block&#39;;
        }
    }else{
        return false;
    }
    if(o==name_pic){
        var count=$(&#39;.pro_img&#39;).length;
        if(count<6){
        name_pic++;
    var pic_p="<a class=&#39;pro_img&#39; id=&#39;a"+name_pic+"&#39; ><input type=&#39;file&#39; id=&#39;file"+name_pic+"&#39;  accept=&#39;image/*&#39; multiple=&#39;multiple&#39; name=&#39;pic[]&#39; onchange=&#39;t1("+name_pic+")&#39;/><img src=&#39;upload.jpg&#39; id=&#39;img"+name_pic+"&#39;></a><img  id=&#39;hidden"+name_pic+"&#39; style=&#39;display:none;&#39;>";
    $(&#39;#upload&#39;).append(pic_p); 
    }       
}
}
</script>
</head>
<!-- multiple=&#39;multiple&#39; -->
<form action="http://192.168.0.7/index.php/Home/Pic/upload" enctype="multipart/form-data" method="post">
<p id=&#39;upload&#39;>
<a class=&#39;pro_img&#39; id=&#39;a1&#39; >
<input type=&#39;file&#39; id=&#39;file1&#39;  accept=&#39;image/*&#39; multiple=&#39;multiple&#39; name=&#39;pic[]&#39; onchange=&#39;t1(1)&#39;/>
<img src=&#39;upload.jpg&#39; id=&#39;img1&#39;></a>
<img  id=&#39;hidden1&#39; style=&#39;display:none;&#39;>
</p>
<input type=&#39;submit&#39; value="上传" />
</form>

Copy after login

You can meet your needs by replacing some upload.png pictures yourself. If there is no response when clicking on the picture, don’t forget to add jquery

Related recommendations:

javascript implements asynchronous image upload method example

HTML5 image upload preprocessing

php, ajax and h5 implement image upload function example

The above is the detailed content of Implementation of HTML multi-image upload preview function. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn