>  기사  >  웹 프론트엔드  >  Pictures_javascript 기술을 업로드하기 위해 fileReader와 결합된 Javascript

Pictures_javascript 기술을 업로드하기 위해 fileReader와 결합된 Javascript

WBOY
WBOY원래의
2016-05-16 16:16:501308검색

여기에서는 File API에 대해 자세히 설명하지 않습니다. 이제 파일 핸들을 사용하여 FileReader 인터페이스를 통해 비동기적으로 로드할 수 있습니다. 파일 내용을 메모리에 저장하고 이를 js 변수에 할당합니다.

코드 복사 코드는 다음과 같습니다.

함수 getImgSrc(대상, 콜백) {
If (window.FileReader) {
      var oPreviewImg = null, oFReader = 새 창.FileReader();
oFReader.onload = 함수(oFREvent) {
oPreviewImg = 새 이미지();
              var type = target.files[0].type.split("/")[1];
          var src = oFREvent.target.result;
oPreviewImg.src = src;
If (콜백 유형 == "함수") {
                   콜백(oPreviewImg, 대상, 유형, src);
            }
               oPreviewImg.src 반환;
        };
          return (함수 () {
            var aFiles = target.files;
                  if (aFiles.length === 0) {
                  반품;
            }
If (!IsImgType(aFiles[0].type)) {
Alert("올바른 이미지 파일을 선택해야 합니다!");
                  반품;
            }
If (aFiles[0].size > 1024 * 1024) {
                   target.value = "";
Alert('1M 이하의 이미지 파일을 업로드해주세요.');
                  반품;
            }
            oFReader.readAsDataURL(aFiles[0]);
         })();
}
If (navigator.appName === "Microsoft Internet Explorer") {
          return (함수 () {
document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = target.value;
         })();
}
}

위는 fileReader와 결합된 자바스크립트를 사용하여 이미지를 업로드하는 키 코드입니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.