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

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

上传图片页面代码:

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

(0)
上一篇 2019年8月23日 上午10:21
下一篇 2019年8月29日 下午4:45

99%的人还看了以下文章

  • 网页中制作精美饼状图源码

    本文使用HTML5 Canvas和jQuery轻松制作精美的动态饼状图,当鼠标点击某个区域时,会动态分享,并高亮显示。饼状图根据表格中指定数据生成,修改使用都非常方便,值得收藏。

    2022年7月14日
    1460
  • 免费蹭网!破解WiFi密码的Python程序源码分享

    文章主要介绍了如何利用Python探测附近WIFI基于python脚本实现wifi密码的暴力破解从而实现免费蹭网,不建议大家做任何破坏性的操作和任何不当的行为!

    2023年1月29日
    7390
  • 实现按拼音或首字母检索城市的JS源码

    项目开发中,需要选择城市,如汽车/火车/飞机的出发站,到达站等,因为站点或城市太多,需要实现用户输入拼音或首字母就能自动检索。 实现这个功能还是有难度的,125网页设计站长给大家分享实现代码,只用引用这个js就可以实现。 实现按拼音/首字母检索城市的js源码: See the Pen 实现按拼音首字母检索城市的js插件 by 江山如画 (@jgyzhr)on…

    2019年10月31日
    2.6K0
  • 快收藏!破解WiFi密码的Python程序源码泄露了

    通过 Python 脚本实现 WIFI 密码的暴力破解,从而实现免费蹭网。 泄露的Python程序源码: import pywifi from pywifi import const import time import datetime # 测试连接,返回链接结果 http://www.125jz.com/ 分享 def wifiConnect(pwd):…

    2023年1月29日
    3710
  • 一款漂亮的网页音乐播放器插件下载-支持mp3,wav

    html5中有播放音乐的标签<audio>,详见《HTML5的视频播放控制技术》、《HTML音频/视频》,但是现在pc端还有浏览器不支持html5,本款js音频播放插件可以实现在网页中播放mp3,wav。 网页音乐播放器插件支持mp3,wav,wmv多种格式(wmv支持度可能不是很好),使用简单方便。 下载解压后,在 index.html 中找到…

    2019年10月31日
    3.3K0
  • 九宫格大转盘抽奖源码-超实用!

    一、用到的图片 二、代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>jQuery九宫格大转盘抽奖</t…

    2021年1月25日 源码下载
    9160

发表回复

登录后才能评论