JS의 FileReader는 이미지 업로드 미리보기를 구현합니다.

이번에는 JS에서 FileReader를 사용한 이미지 업로드 미리보기를 가져오겠습니다. JS에서 FileReader를 사용하여 이미지 업로드 미리보기를 구현할 때의 주의사항은 무엇인가요?

JavaScript많은 사람들이 FileReader를 사용하여 이미지 업로드의 미리보기 효과를 얻는 것에 대해 혼란스러워합니다. 대부분의 사람들은 FileReader를 사용하여 이미지 업로드의 미리보기 효과를 얻는 방법을 모릅니다. 다음 문서에서는 자세한 작업 방법을 제공합니다. 그리고 코드를 함께 살펴보겠습니다.

FileReader는 HTML5 파일 API의 일부입니다. 비동기 파일 읽기 메커니즘을 구현합니다. FileReader를 XMLHttpRequest로 생각할 수 있지만 유일한 차이점은 원격 서버 대신 파일 시스템 을 읽는다는 것입니다. 파일의 데이터를 읽기 위해 ​​FileReader는 다음과 같은 메소드를 제공합니다.

• readAsText(file,encoding): 파일을 일반 텍스트로 읽고 읽은 파일을 result 속성에 저장합니다.

• readAsDataURL(file): 파일을 읽고 결과 속성에 파일을 데이터 URI 형식으로 저장합니다.

• readAsBinaryString(file): 파일을 읽고 결과 속성에 string을 저장합니다. 문자열의 각 문자는 1바이트를 나타냅니다.

• readAsArrayBuffer(file): 파일을 읽고 결과 속성에 파일 내용이 포함된 ArrayBuffer를 저장합니다.
  다중 속성은 여러 사진에 대한 지원을 나타냅니다.

• <p id="wrapper">    
   <input id="fileUpload" type="file" multiple /><br />
   <p id="image-holder"> </p>
  </p>

  $("#fileUpload").on('change', function () {
   
    //获取上传文件的数量
    var countFiles = $(this)[0].files.length;
   
    var imgPath = $(this)[0].value;
    var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
    var image_holder = $("#image-holder");
    image_holder.empty();
    if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
      if (typeof (FileReader) != "undefined") { 
        // 循环所有要上传的图片
        for (var i = 0; i < countFiles; i++) {
   
          var reader = new FileReader();
          reader.onload = function (e) {
            $("<img />", {
              "src": e.target.result,
                "class": "thumb-image"
            }).appendTo(image_holder);
          }
          image_holder.show();
          reader.readAsDataURL($(this)[0].files[i]);
        }
      } else {
        alert("你的浏览器不支持FileReader！");
      }
    } else {
      alert("请选择图像文件。");
    }
  });

FileReader는 Internet Explorer 10 이상, FireFox, Chrome 및 Opera 브라우저를 지원합니다.

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

추천 자료:

node.js에서 데코레이터 패턴을 구현하는 방법

Django 다중 데이터베이스를 사용하는 자세한 단계

위 내용은 JS의 FileReader는 이미지 업로드 미리보기를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!