HTML5 图片上传源码免费下载(兼容电脑，移动端)

江山如画 • 2019年8月26日上午8:57 • 源码下载 • 阅读 12843

上传图片页面代码：

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