Maison >interface Web >tutoriel HTML >Comment créer plusieurs effets d'aperçu de téléchargement d'images basés sur HTML
Cette fois, je vais vous montrer comment créer un effet d'aperçu de téléchargement multi-images basé sur HTML. Quelles sont les précautions pour créer un effet d'aperçu de téléchargement multi-images basé sur HTML. cas pratique. Jetons un coup d'oeil.
J'ai récemment écrit un script pour télécharger plusieurs images sur une page Web. Je pense que c'est assez pratique. Je n'entrerai pas dans les détails et je collerai simplement le code~
<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>
. Remplacez vous-même certains fichiers upload.png. Une image peut répondre à vos besoins. S'il n'y a pas de réponse lorsque vous cliquez sur l'image, n'oubliez pas d'ajouter jquery
Je pense que vous maîtrisez la méthode après avoir lu ces cas. .Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !
Lecture connexe :
Introduction détaillée au stockage local et à la base de données locale de H5
Comment utiliser le serveur sse de h5 pour envoyer EventSource Event
Comment implémenter la fonction de mémorisation du mot de passe dans h5
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!