angularJS+Ionic 모 바 일 사진 업로드 솔 루 션

전단 개발 에서 이미지 업로드 문제 에 자주 부 딪 히 고 인터넷 에서 해결 방법 이 많 습 니 다.그러나 일부 이미지 업로드 플러그 인 은 부속 플러그 인 이 있 습 니 다.따라서 한 이미지 업로드 문제 로 인해 다른 플러그 인 을 프로젝트 에 도입 해 야 할 수도 있 습 니 다.오 랜 프로젝트 가 다 르 고 플러그 인 간 에 충돌 이 있 을 수도 있 습 니 다.그래서 우 리 는 스스로 사진 을 써 서 올 리 는 방법 을 쓸 수 있다.
오늘 의 demo 는 친 구 를 도와 만 든 모 바 일 위 챗 공중 번호 프로젝트 입 니 다.프로젝트 구 조 는 angular+ionic 을 사용 합 니 다.dom 의 조작 jQuery 는 매우 편리 하지만 jQuery 는 비교적 두 꺼 워 서 마지막 으로 경량급 zepto 로 프로젝트 dom 을 조작 합 니 다.
프로젝트 중 하 나 는 개인 작품 을 업로드 하 는 것 이 고 기능 을 실현 하려 면 H5 새 대상 FormData 대상,XML HttpRequest 대상,FileReader 대상 이 필요 하 다.이 세 개의 대상 만 있 으 면 되 고,말 은 더 이상 코드 를 말 하지 않 는 다.
dom 구조:

js 구조:
function1:

$scope.imgList = [];
$scope.setUploader = function () {
  var files = document.getElementById('photo');
  files.click();
  $(files).unbind().on('change',function (e) {
    var file = e.target.value;
    if (!/.(jpg|jpeg|png|GIF|JPG|png)$/.test(file)) {
      common.toast('       jpeg,jpg,png    ');
      return false;
    };
    fsubmit();
    readAsBinaryString();
  });
};

function2：

function fsubmit() {
  var itemImg = {};
  var form=document.getElementById("form1");
  console.log('form',form)
  var formData=new FormData(form);
  formData.append('wxdesigner_sid',$.fn.cookie('wxdesigner_sid'));
  formData.append('id',$scope.masterInfo.id);
  formData.append('pc','1');
  var oReq = new XMLHttpRequest();
  oReq.onreadystatechange=function(){
    if(oReq.readyState==4){
      if(oReq.status==200){
        var json=JSON.parse(oReq.responseText);
        console.log(json)
        if(json.Success) {
          itemImg = json.Data;
          $scope.imgList=itemImg;
          console.log($scope.imgList)
          $scope.$apply();
          itemImg = {};
        }
      }
    }
  };
  console.log(oReq)
  console.log(formData)
  oReq.open("POST", common.api+"Wxdesigner/Designer/uploadworks");
  oReq.send(formData);
  return false;
};

//         FileReader  
if(typeof FileReader == 'undefined'){
  //         
  file.setAttribute("disabled","disabled");
}

function3:

function readAsBinaryString(){
  var file = document.getElementById('photo').files[0];
  console.log(file)
  var reader = new FileReader();
  //             
  reader.readAsDataURL(file);
  reader.onload=function(f){
    $scope.masterInfo.thumblist.push(f.currentTarget.result)
    console.log($scope.masterInfo)
    $scope.$apply()
  }
}

전체 그림 에 올 라 온 dom 층 은 간단 합 니 다.form 폼 에 트리거 폼 을 추가 하 는 함수(function 1)입 니 다.function 1 에서의 클릭 이 벤트 를 가 져 옵 니 다.그림 을 선택 할 때 판단 을 합 니 다.지원 하 는 그림 형식 을 초과 할 때 알림 을 줍 니 다.
그리고 뒤에서 function 2 와 function 3 를 호출 합 니 다.
function 2 에서 form 폼 대상 을 가 져 온 다음 FormData 대상 을 만 들 고 가 져 온 form 폼 을 FormData 에 전송 한 다음 append 에서 그림 을 올 리 는 인 자 를 만 듭 니 다.new XML HttpRequest 대상 을 만 든 다음 open 에서 XHR 요청 인 터 페 이 스 를 보 내 고 send(formData)는 인 터 페 이 스 를 전달 합 니 다.
이때 까지 인터페이스 전송 에 성 공 했 습 니 다.

 여기 있 는 네 개의 매개 변 수 는 formData 의 네 개의 매개 변수 입 니 다.

인터페이스 가 성공 적 이다.
여기에 문제 가 있 습 니 다.이미지 업로드 가 데이터베이스 에 성공 적 으로 기록 되 었 습 니 다.그러나 이 때 는 로 컬 에서 사용자 에 게 보 여 줘 야 하지만 웹 페이지 는 장치 로 컬 그림 에 직접 접근 할 수 없 기 때문에 올 린 그림 파일 을 DataURL 로 읽 어 로 컬 에 보 여 줘 야 합 니 다.
먼저 New FileReader 대상 을 가 져 온 input file 대상 을 FileReader 의 readAsDataURL()방법 으로 전송 합 니 다.이 방법 은 파일 을 DataURL 로 읽 는 것 입 니 다.
그리고 FileReader 의 onload 방법 을 호출 합 니 다.이 방법의 result 는 변 환 된 url 이 있 기 때문에 이 url 을 얻 을 수 있 습 니 다.사실은 base 64 인 코딩 을 거 쳤 습 니 다.그리고 push 는 그림 목록 의 마지막 까지

여기 서 문 제 를 해 결 했 습 니 다.전단 에 로 컬 그림 을 보 여 주 었 고 그림 도 데이터 베 이 스 를 기록 하 였 습 니 다.페이지 를 다시 새로 고 칠 때 데이터 베 이 스 를 받 았 습 니 다.

물론 여 기 는 하나의 방법 일 뿐 입 니 다.모 바 일 이미지 업로드 플러그 인 이 비 일비 재 합 니 다.심지어 각종 끌 어 올 린 이미지 업로드 플러그 인 도 많 습 니 다.이 곳 은 프로젝트 에 플러그 인 을 도입 하지 않 아 도 되 는 이미지 업로드 의 간단 한 기능 에 적합 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.