angularJS+Ionic은 모바일 이미지 업로드 기능을 구현합니다.

이번에는 모바일 이미지 업로드 기능을 구현하는 angularJS+Ionic과 모바일 이미지 업로드 기능을 구현하는 AngleJS+Ionic을 소개합니다. notes는 다음과 같습니다.

프런트 엔드 개발에서 이미지 업로드 문제가 자주 발생합니다. 그러나 일부 이미지 업로드 플러그인에는 일부 플러그인이 첨부되어 있으므로 이미지 업로드 문제로 인해 다른 플러그인을 도입해야 할 수도 있습니다. 시간이 지남에 따라 프로젝트는 설명할 수 없게 되고 때로는 플러그인 간에 충돌이 발생할 수 있으므로 이미지를 업로드하는 방법을 직접 작성할 수 있습니다.

오늘의 데모는 친구를 위해 만든 모바일 WeChat 공개 계정 프로젝트입니다. 프로젝트 아키텍처는 DOM에서 jQuery를 작동하는 것이 훨씬 편리하기 때문에 Angular+ionic을 채택하지만 jQuery는 상대적으로 무거워서 결국 경량을 사용하기로 결정했습니다. zepto는 프로젝트를 운영하기 위한 것입니다.

프로젝트의 요구 사항 중 하나는 개인 작품을 업로드하는 것입니다. 기능을 구현하려면 새로운 H5 개체 FormData 개체, XMLHttpRequest 개체 및 FileReader 개체가 필요합니다. 이 세 가지 객체만 필요하므로 코드에 대해서는 많이 이야기하지 않겠습니다.

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();
  });
};

기능2:

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 레이어는 매우 간단합니다. 양식과 양식을 트리거하는 함수(function1)가 추가된 것입니다. function1에서 의 클릭 이벤트를 얻어 이미지 선택 시 지원되는 이미지 유형의 범위를 초과하면 알림이 발행됩니다.

그런 다음 나중에 function2와 function3을 호출하세요.

function2에서 양식 개체를 가져온 다음 FormData 개체를 만들고, 얻은 양식을 FormData에 전달한 다음 이미지 업로드를 위한 일부 매개 변수를 추가합니다. 또 다른 새로 만들기 XMLHttpRequest 객체를 선택한 다음 XHR 요청 인터페이스를 열고 send(formData)가 매개변수를 인터페이스에 전달합니다.

이때 인터페이스가 성공적으로 전송됩니다.

여기에 있는 4개의 매개변수는 formData

의 4개 매개변수입니다. 그에 따라 인터페이스가 성공합니다.

여기에 문제가 있습니다. 이미지 업로드가 데이터베이스에 성공적으로 기록되었지만 이때는 사용자에게 로컬로 표시되어야 하지만 웹 페이지에서는 장치의 로컬 이미지에 직접 액세스할 수 없으므로 FIleReader 개체가 필요합니다. 업로드된 이미지 파일을 로컬에 표시된 DataURL로 읽습니다.

먼저 FileReader 객체를 새로 만든 다음 얻은 입력 파일 객체를 FileReader의 readAsDataURL() 메서드에 전달합니다. 이 메서드는 파일을 DataURL로 읽습니다.

그런 다음 FileReader의 onload 메서드를 호출합니다. 이 메서드의 결과에는 변환된 URL이 있으므로 실제로 base64로 인코딩된 이 URL을 얻을 수 있습니다. 그런 다음 사진 목록의 마지막으로 밀어 넣으세요

이렇게 하면 문제가 해결됩니다. 페이지를 다시 새로 고치면 해당 이미지가 데이터베이스에 기록됩니다. 물론 이는 많은 플러그인이 있습니다. 예, 다양한 드래그 앤 드롭 업로드를 위한 이미지 업로드 플러그인도 많이 있습니다. 이는 플러그인을 도입하지 않고도 프로젝트에서 간단한 이미지 업로드 기능에 적합합니다. ​ ​

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

vue2.x 양방향 바인딩 캡슐화에 대한 자세한 설명

Npm을 cli 명령줄 도구로

비동기 구현을 약속합니다

위 내용은 angularJS+Ionic은 모바일 이미지 업로드 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!