Heim > Artikel > Web-Frontend > Verwenden Sie HTML, um mehrere Vorschaufunktionen für das Hochladen von Bildern zu implementieren

Verwenden Sie HTML, um mehrere Vorschaufunktionen für das Hochladen von Bildern zu implementieren

巴扎黑Original: 2017-03-14 11:31:471507Durchsuche

Ich habe kürzlich eine Webseite mit mehreren Bildern geschrieben Das Skript zum Hochladen von fühlt sich ziemlich praktisch an, daher werde ich nicht auf Details eingehen und einfach den Code einfügen~

<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>

Ersetzen Sie einige upload.png durch dieses Bild kann Ihren Anforderungen entsprechen. Wenn beim Klicken auf das Bild keine Antwort erfolgt, vergessen Sie nicht, jquery hinzuzufügen

Das obige ist der detaillierte Inhalt vonVerwenden Sie HTML, um mehrere Vorschaufunktionen für das Hochladen von Bildern zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Analysieren Sie den Unterschied zwischen width:100% und width:auto;Nächster Artikel：Analysieren Sie den Unterschied zwischen width:100% und width:auto;

In Verbindung stehende Artikel

Mehr sehen