<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>手机图片上传</title> <script type="text/javascript"> (function(){function a(h,g,b,e,c){var f=h.documentElement,d="orientationchange" in window?"orientationchange":"resize";var i=function(){var j=f.clientWidth;if(j>=e&&j<=b){f.style.fontSize=c*(j/b)+"px"}else{if(j>=b){f.style.fontSize=c+"px"}else{if(j<=e){f.style.fontSize=c*(e/b)+"px"}}}};g.addEventListener(d,i,false);h.addEventListener("DOMContentLoaded",i,false)}a(document,window,640,320,40)})(); </script> </head> <body> <style> html,body{ margin:0;padding:0; height:100%; font-family: "Microsoft YaHei" } .page1_img{ width:6rem;height:6rem; } .page1_pic{ padding-top:4.5rem;text-align:center; } .page1_name{ font-size:.7rem;text-align:center; margin-top:4.5rem; } .btn{ margin:0 auto; color:#fff; width:10.7rem; height:2.2rem; line-height:2.2rem; font-size:.9rem; text-align:center; border-radius:.2rem; } .blue{ background: #4D8ACE; } .grey{ background:#DEDEDE } .page1_button{ text-align:center; margin-top:.6rem; } .page2{ height:100%; background:#f4f4f4; } .page2_name{ color:#4D8ACE; font-size:.75rem; text-align:center; padding-top:4.2rem; } .page2_img{ width:4.7rem;height:4.7rem; } .page2_pic{ margin-top:1.6rem; text-align:center; } .page2_button{ text-align:center; margin-top:2.2rem; } @-webkit-keyframes rotation{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } .Rotation{ -webkit-transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3s linear infinite; -webkit-animation: rotation 3s linear infinite; -o-animation: rotation 3s linear infinite; } .page3_img{ width:4rem;height:4rem; } .page3_pic{ padding-top:4rem;text-align:center; } .page3_button{ text-align:center; margin-top:2.6rem; } .page3_name1{ font-size:1rem;text-align:center; margin-top:0.3rem; color: #4D8ACE; } .page3_name2{ font-size:.8rem;text-align:center; margin-top:0.7rem; color: #4D8ACE; } .page4_img{ width:4rem;height:4rem; } .page4_pic{ padding-top:4rem;text-align:center; } .page4_name1{ font-size:1rem;text-align:center; margin-top:0.3rem; } .page4_name2{ font-size:.85rem;text-align:center; margin-top:0.7rem; } </style> <div class="page1" > <div class="page1_pic"> <img class="page1_img" src="img/upload_file.png" > </div> <div class="page1_name">仅支持JPG、PNG等格式图片上传</div> <div class="page1_button"> <div class="btn blue" id="upload_id">上传照片</div> </div> </div> <div class="page2" style="display:none;"> <div class="page2_name">可在网上查看上传图片</div> <div class="page2_pic"> <img class="page2_img Rotation" src="img/upload_loading.png" > </div> <div class="page2_button"> <div class="btn grey" id="uploading_id">正在上传中</div> </div> </div> <div class="page3" style="display:none;"> <div class="page3_pic"> <img class="page3_img" src="img/upload_success.png" > </div> <div class="page3_name1">上传成功</div> <div class="page3_name2">可在网上查看上传图片</div> <div class="page3_button"> <div class="btn blue" id="upload2_id">继续上传</div> </div> </div> <div class="page4" style="display:none;"> <div class="page4_pic"> <img class="page4_img" src="img/upload_fail.png" > </div> <div class="page4_name1">无法上传</div> <div class="page4_name2">二维码已过期</div> </div> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> $(function(){ $(".page1").click(function(){ $(".page1").hide(); $(".page2").show(); }) $(".page2").click(function(){ $(".page2").hide(); $(".page3").show(); }) $(".page3").click(function(){ $(".page3").hide(); $(".page4").show(); }) $(".page4").click(function(){ $(".page4").hide(); $(".page1").show(); }) }) </script> </body> </html>