Heim > Artikel > Web-Frontend > So erstellen Sie mehrere Vorschaueffekte für das Hochladen von Bildern basierend auf HTML

So erstellen Sie mehrere Vorschaueffekte für das Hochladen von Bildern basierend auf HTML

php中世界最好的语言Original: 2018-01-20 09:21:572065Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie einen Vorschaueffekt für das Hochladen mehrerer Bilder auf HTML-Basis erstellen Werfen wir einen Blick darauf. Ich habe kürzlich ein Skript zum Hochladen mehrerer Bilder auf eine Webseite geschrieben. Ich werde nicht auf die Details eingehen und nur den Code einfügen.

Ersetzen Sie einige upload.png-Dateien selbst. Wenn beim Klicken auf das Bild keine Antwort erfolgt, vergessen Sie nicht, jquery hinzuzufügen. Ich glaube, Sie beherrschen die Methode, nachdem Sie diese Fälle gelesen haben Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

<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_div="<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_div);
    }      
}
}
</script>
</head>
<!-- multiple=&#39;multiple&#39; -->
<form action="http://192.168.0.7/index.php/Home/Pic/upload" enctype="multipart/form-data" method="post">
<div 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;>
</div>
<input type=&#39;submit&#39; value="上传" />
</form>

Verwandte Lektüre:

Detaillierte Einführung in den lokalen Speicher und die lokale Datenbank von H5

So verwenden Sie den SSE-Server von H5 zum Senden EventSource Event

So implementieren Sie die Funktion „Passwort merken“ in h5

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mehrere Vorschaueffekte für das Hochladen von Bildern basierend auf HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery html 事件数据库

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：So verwenden Sie den H5-SSE-Server zum Senden von EventSource-EreignissenNächster Artikel：So verwenden Sie den H5-SSE-Server zum Senden von EventSource-Ereignissen

In Verbindung stehende Artikel

Mehr sehen