HTML은 여러 이미지 업로드 미리보기 기능을 구현합니다.-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML은 여러 이미지 업로드 미리보기 기능을 구현합니다.

高洛峰

Mar 11, 2017 am 11:54 AM

html

최근 웹페이지에서 다중 이미지 업로드 미리보기 기능을 사용하고 있는데, 느낌이 꽤 좋습니다. 오늘은 HTML 기반으로 다중 이미지 업로드 미리보기 기능을 구현하는 방법을 알려드리는 시간을 가져보겠습니다. 보세요.

최근 웹페이지에 여러 이미지를 업로드하는 스크립트를 작성했습니다. 자세한 내용은 생략하겠습니다~

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

로그인 후 복사

upload.png 사진을 직접 교체하세요. 이미지를 클릭해도 응답이 없으면 jquery를 추가하는 것을 잊지 마세요.

위는 HTML 기반의 다중 이미지 업로드 미리보기 기능에 대한 편집자의 소개입니다. 모든 분들께 도움이 되기를 바랍니다. 궁금한 사항이 있으면 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다. . 또한 Script House 웹사이트를 지원해 주신 모든 분들께 감사의 말씀을 전하고 싶습니다!

위 내용은 HTML은 여러 이미지 업로드 미리보기 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.