首页 > 编程 > HTML > 正文

Html5上传图片 移动端、PC端通用代码

2019-10-26 17:42:15
字体:
来源:转载
供稿:网友

废话不多说了,说一下今天给大家分享的是 html5上传图片。我们是在移动端使用的,但是这个在pc上也通用兼容性我只在谷歌测试过。之前一直用的angular写的《用HTML5的File API做上传图片预览能》。今天摒弃angular的东西分享一个html5 + js 图片上传案例。那么今天还是按照一定的步骤来讲吧。

 HTML 第一步创建html,我们在页面中放置一个文件选择的input#upload(PS:偷懒一下,这里就不再次写案例了直接复制的我们的页面)

CSS Code复制内容到剪贴板
  1. <div class="con4">       <span class="btn upload">上传<input type="file" class="upload_pic" id="upload" /></span>     
  2. </div>     

CSS注:css 写的有些乱哈,看不懂的可以问我,或者直接自己写一下就ok。

CSS Code复制内容到剪贴板
  1. con{            width: %;      
  2.      height: auto;            overflow: hidden;      
  3.      margin: % auto  auto;            color: #FFFFFF;      
  4. }       con .btn{      
  5.      width: %;            height: px;      
  6.      line-height: px;            text-align: center;      
  7.      background: #dbc;            display: block;      
  8.      font-size: px;            border-radius: px;      
  9. }       upload{      
  10.      float: left;            position: relative;      
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表