黑马程序员技术交流社区

标题: 【上海校区】移动端上传图片--调用手机的相册和相机 [打印本页]

---

作者: 不二晨    时间: 2018-8-15 09:48
标题: 【上海校区】移动端上传图片--调用手机的相册和相机

网上百度找到一个方法不错，借鉴：代码如下

html:

• 
  
  <div class="head">
  
  
• 
  
      <a class="btn-2">
  
  
• 
  
          <input type="file" accept="image/*" id="upload" name="upload">
  
  
• 
  
      </a>
  
  
• 
  
  </div>
  
  
• 
  
  <div class="photo" id="preview"></div>
  
  
  

css样式：

• 
  
  .head{
  
  
• 
  
      height:40px;
  
  
• 
  
      width:100%;
  
  
• 
  
      position:relative;
  
  
• 
  
      z-index:110;
  
  
• 
  
      left:0px;
  
  
• 
  
      top:10px;
  
  
• 
  
  }
  
  
• 
  
  .head .btn-2{
  
  
• 
  
      display:block;
  
  
• 
  
      width:42px;
  
  
• 
  
      height:45px;
  
  
• 
  
      background:url(../image/nimg37_2.png) center no-repeat;
  
  
• 
  
      background-size:30px;
  
  
• 
  
      position:absolute;
  
  
• 
  
      top:0px;
  
  
• 
  
      right:46px;
  
  
• 
  
  }
  
  
• 
  
  .head .btn-2 input {
  
  
• 
  
      width:42px;
  
  
• 
  
      height:45px;
  
  
• 
  
      position: absolute;
  
  
• 
  
      right: 0px;
  
  
• 
  
      top: 0;
  
  
• 
  
      opacity: 0;
  
  
• 
  
  }
  
  
  

js.js

• 
  
  var upload = document.getElementById('upload'),
  
  
• 
  
      preview = document.getElementById('preview'),
  
  
• 
  
      surebtn = document.getElementById('surebtn'),
  
  
• 
  
      imgurl = '';
  
  
• 
  
  
  
  
• 
  
  upload.addEventListener('change',handleFile,false);
  
  
• 
  
  surebtn.addEventListener('click',upLoadFile,false);
  
  
• 
  
  
  
  
• 
  
  function handleFile(){
  
  
• 
  
      window.URL = window.URL || window.webkitURL;
  
  
• 
  
      var sUserAgent= navigator.userAgent.toLowerCase();
  
  
• 
  
      var selected_file = upload.files[0];
  
  
• 
  
  
  
  
• 
  
      if(sUserAgent.match(/android/i) == "android"){
  
  
• 
  
          var img = new Image();
  
  
• 
  
          img.src = window.URL.createObjectURL(selected_file);
  
  
• 
  
          preview.innerHTML = '';
  
  
• 
  
          preview.appendChild(img);
  
  
• 
  
  
  
  
• 
  
  
  
  
• 
  
          var reader = new FileReader();
  
  
• 
  
          reader.onload = function(e) { imgurl = e.target.result; };
  
  
• 
  
          reader.readAsDataURL(selected_file);
  
  
• 
  
  
  
  
• 
  
      }else{
  
  
• 
  
  
  
  
• 
  
          //判断文件类型是否为图片
  
  
• 
  
          var imageType = /image.*/;
  
  
• 
  
  
  
  
• 
  
          if (!selected_file.type.match(imageType)) {
  
  
• 
  
              return false;
  
  
• 
  
          }
  
  
• 
  
  
  
  
• 
  
          var img = document.createElement('img');
  
  
• 
  
          img.file = selected_file;
  
  
• 
  
          preview.innerHTML = '';
  
  
• 
  
          preview.appendChild(img);
  
  
• 
  
  
  
  
• 
  
          img.onload = function(){
  
  
• 
  
              imgurl = img.src;
  
  
• 
  
          }
  
  
• 
  
  
  
  
• 
  
          var reader = new FileReader();
  
  
• 
  
          reader.onload = function(e) { img.src = e.target.result; };
  
  
• 
  
          reader.readAsDataURL(selected_file);
  
  
• 
  
      }
  
  
• 
  
  }
  
  
• 
  
  
  
  
• 
  
  function upLoadFile(){
  
  
• 
  
      var start = imgurl.indexOf(',')+1;
  
  
• 
  
      dataurl = imgurl.substr(start);
  
  
• 
  
  
  
  
• 
  
      var xmlhttp = new XMLHttpRequest();
  
  
• 
  
      xmlhttp.open('post','todo.php',true);
  
  
• 
  
      xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8');
  
  
• 
  
      xmlhttp.setRequestHeader('X_Requested-With','XMLHttpRequest');
  
  
• 
  
      xmlhttp.send('dataurl='+encodeURIComponent(dataurl));
  
  
• 
  
  
  
  
• 
  
      xmlhttp.onreadystatechange=function(){
  
  
• 
  
          if (xmlhttp.readyState==4 && xmlhttp.status==200){
  
  
• 
  
              console.log(xmlhttp.responseText)
  
  
• 
  
          }
  
  
• 
  
      }
  
  
• 
  
  }
  
  
  

【转载】        https://blog.csdn.net/u012054869/article/details/81669739

---

作者: 不二晨    时间: 2018-8-16 17:14
奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2