Rumah > hujung hadapan web > html tutorial > 使用HTML实现多图上传预览功能

使用HTML实现多图上传预览功能

巴扎黑
Lepaskan: 2017-03-14 11:31:47
asal
1684 orang telah melayarinya

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

<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>
Salin selepas log masuk

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


Atas ialah kandungan terperinci 使用HTML实现多图上传预览功能 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan