明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

基于HTML如何做出多圖上傳瀏覽效果

發(fā)表時間：2023-09-23 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)砘贖TML如何做出多圖上傳預(yù)覽效果，基于HTML做出多圖上傳預(yù)覽效果的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。自己最近寫了一個網(wǎng)頁多圖上傳的腳本,感覺挺實用的,細(xì)節(jié)就不要說了,直接貼代碼了~<head><style>.pro_img{ margin-...
這次給大家?guī)砘贖TML如何做出多圖上傳預(yù)覽效果，基于HTML做出多圖上傳預(yù)覽效果的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

自己最近寫了一個網(wǎng)頁多圖上傳的腳本,感覺挺實用的,細(xì)節(jié)就不要說了,直接貼代碼了~

<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(count<6){
        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這張圖片就能達到自己的需求,如果說圖片點擊沒反應(yīng),別忘了加入jquery

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

H5的本地存儲和本地數(shù)據(jù)庫詳細(xì)介紹

怎樣用h5的sse服務(wù)器發(fā)送EventSource事件

h5如何實現(xiàn)記住密碼功能

以上就是基于HTML如何做出多圖上傳預(yù)覽效果的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。