Android의 HTML5 이미지 업로드 예에 대한 자세한 설명

애플리케이션 플랫폼 환경: Android webview;

관련 기술 사항:

(1) : 개발 중에는 Android webview가 기본적으로 파일 선택 및 카메라 사진을 호출할 수 없습니다(iOS 등 다른 브라우저). 장치에는 이 문제가 없습니다), Android 개발 학생들에게 코드를 조정하도록 요청해야 합니다.

(2) 이미지를 클릭하여 선택한 후 페이지에 표시하는 방법은 무엇입니까? 많은 개발자가 this.value를 직접 얻을 수도 있는데, 이는 잘못된 것이며 실현 가능하지 않습니다. 구현할 수 있는 API는 2가지가 있는데, 새로운 FileReader와 window.URL.createObjectURL(최적)

　　new FileReader는 다음과 같이 구현됩니다.

 
 upload

실제 Android 웹뷰에서는 읽기 및 쓰기 속도가 매우 느리므로 권장하지 않습니다.

//----------------------------------------- - ------------------------------------------------- -

window.URL.createObjectURL은 다음과 같이 구현됩니다.

<input type="file" name="" id="j-file">
 <img src="" id=&#39;j-img&#39; alt="" width="100%">
 <button id=&#39;j-btn&#39;>upload</button>
 <script type="text/javascript">
  var o_file = document.getElementById('j-file'),
      o_btn = document.getElementById('j-btn'),
      o_img = document.getElementById('j-img');

  o_file.addEventListener('change',function(event){      var file = event.target.files[0];      if(!file) return;      var url = window.URL.createObjectURL(file);      if(/image/.test(file.type)){
          o_img.setAttribute('src',url);
      }else{
          console.log('请选择图片');
      }
  },false);

  o_btn.onclick = function(){      var data = new FormData();
      data.append('file_a',o_file.files[0]);
      data.append('text','test');
        console.log(data);
  } </script>

이 기술의 장점은 파일 내용을 자바스크립트로 읽어올 필요 없이 파일 내용을 직접 사용한다는 점입니다.

(3) XHR 객체를 통해 이미지 데이터를 서버에 전달하는 방법은 무엇입니까? 새로운 FormData()는 양식을 직렬화하고 양식과 동일한 형식(XHR 전송)으로 데이터를 생성하기 위한 구현을 제공합니다. FormData는 xhr 객체에 요청 헤더를 명시적으로 설정할 필요가 없습니다(양식에 이미지 업로드인 경우). enctype은 multipart/form -data를 설정해야 함), XHR은 데이터를 사용자 정의하기 위해 인스턴스 메소드 .append(key, value)를 자동으로 식별할 수 있습니다.

전체 코드 예제는 다음과 같습니다.

<input type="file" name="" id="j-file">
 <img src="" id=&#39;j-img&#39; alt="" width="100%">
 <button id=&#39;j-btn&#39;>upload</button>
 <script type="text/javascript">
  var o_file = document.getElementById('j-file'),
      o_btn = document.getElementById('j-btn'),
      o_img = document.getElementById('j-img'),
      target_file = null;

  o_file.addEventListener('change',function(event){      var file = event.target.files[0];      if(!file) return;
      target_file = file;      var url = window.URL.createObjectURL(target_file);      if(/image/.test(target_file.type)){
          o_img.setAttribute('src',url);
      }else{
          console.log('请选择图片');
      }
  },false);

  o_btn.onclick = function(){      if(!target_file) return;      //数据处理  var data = new FormData();
      data.append('key',target_file);    
      var xhr = new XMLHttpRequest();      if(xhr.upload){
        xhr.upload.addEventListener("progress", function(e){          var loaded = e.loaded;    //已经上传大小情况   var tot = e.total;      //附件总大小   var per = Math.floor(100*loaded/tot);  //已经上传的百分比           console.log(per+'%');//进度        }, false);
      }
    
      xhr.onreadystatechange = function(e) {          if (xhr.readyState == 4) {if (xhr.status >=200&&xhr.status<300||xhr.status==304) {//上传成功                             }
          }
      }; 
      xhr.onloadend = function(){//无论失败或成功      }
      xhr.onerror = function(){          
          //网络失败      }      // 开始上传      xhr.open("POST",'上传地址', true); 
      xhr.send(data); 
  } </script>

위 내용은 Android의 HTML5 이미지 업로드 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!