집 > 기사 > 웹 프론트엔드 > angleJS+Ionic은 모바일 단말기에 이미지를 업로드합니다(코드 포함).

angleJS+Ionic은 모바일 단말기에 이미지를 업로드합니다(코드 포함).

php中世界最好的语言원래의: 2018-04-17 11:22:351499검색

이번에는 모바일 단말기에서 이미지를 업로드할 수 있는 angularJS+Ionic을 가져왔습니다(코드 포함).AngularJS+Ionic이 모바일 단말기에서 이미지를 업로드할 때 사용하는 주의 사항은 다음과 같습니다. 봐.

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

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

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

기능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 중국어 웹사이트의 다른 관련 기사를 주목하세요!