上传图片页面代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <script type="text/javascript"> if(/Android (\d+\.\d+)/.test(navigator.userAgent)){ var version = parseFloat(RegExp.$1); if(version>2.3){ var phoneScale = parseInt(window.screen.width)/640; document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">'); }else{ document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); } }else{ document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); } </script> <title></title> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <form name="form" action="" method="POST" enctype="multipart/form-data"> <div class="wrap"> <div class="album-old"> <div class="upload-btn btn-old"><input type="file" name="" id=""></div> <div class="upload-img "></div> </div> <div class="album-new"> <div class="upload-btn btn-new"><input type="file" name="" id=""></div> <div class="upload-img "></div> </div> <div class="wan"></div> <div class="textarea"> <textarea placeholder="请填写您和您闺蜜的故事,字数不超过20字"></textarea> </div> <div class="submit"></div> </div> </form> <script type="text/javascript" src="js/zepto.min.js"></script> <script type="text/javascript" src="js/iscroll-zoom.js"></script> <script type="text/javascript" src="js/script.js"></script> </body> </html>
图片上传结果页面核心代码:
<div class="wrap result"> <div class="album-old"> <div class="upload-img"></div> </div> <div class="album-new"> <div class="upload-img"></div> </div> <div class="wan"></div> <div class="textarea"> 请填写您和您闺蜜的故事,字数不超过20字 </div> <div class="share"></div> <div class="share-tip"><img src="images/tip.png"></div> </div> <script type="text/javascript" src="js/zepto.min.js"></script> <script> $(".share").click(function(){ $(".share-tip").show(); }); $(".share-tip").click(function(){ $(".share-tip").hide(); }); </script>
下载地址:HTML5 图片上传源码免费下载(兼容电脑,移动端)
125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3623.html