사용자 정의 파일 업로드 스크립트가 사파리에서 작동하지 않습니다

Question

기본적으로 사용자/클라이언트가 업로드하고 싶은 이미지를 선택하거나 클릭하여 상자로 드래그하여 업로드 할 수있는 사용자 정의 업로드 스크립트가 있습니다. 미리보기가 나타납니다. 코드는 파이어 폭스와 크롬에서 잘 작동하지만 사파리에서는 그렇지 않은 것 같습니다. 내 고객이 주로 사파리를 사용한다는 것을 알고 있으며, 사파리를 위해 사파리를 사용하고 싶습니다.

왜 사파리에서 작동하지 않습니까?

HTML -

<form method='post' enctype='multipart/form-data' action='#'> 
<div style="height: 200px;"> 
<div class="droparea spot logoupload"> 
<div class="instructions"><img class="previewlogo" src="http://wmemusic.com/wme/admin/img/loginlogo.jpg" alt="Click or Drag image here to add login logo"/> 
</div> 
<input type="file" class="droparea spot logoupload" name="logo" onchange="readURL(this);"/> 
</div> 
</div> 
</form> 

CSS -

.droparea { 
       position:relative; 
       text-align: center; 
       min-height:100px; 
       margin:0; 
      } 

      .droparea div, .droparea input { 
       position: absolute; 
       top:0; 
       right:2px; 
       width: 100%; 
       height: 100%; 
      } 
      .droparea input { 
       cursor: pointer; 
       opacity: 0; 
      } 
      .droparea .instructions { 
       border: 2px dashed #ddd; 
       max-height:200px; 
       height:auto; 
       min-height:100px; 
       overflow:hidden 
      } 
      .droparea .instructions.over { 
       border: 2px dashed #000; 
       background: #ffa; 
      } 


      #areas { width: 480px; } 
      div.spot { 

       margin: 5px auto; 

      } 
      .logoupload {width: 262px; 
       min-height: 100px; 
       height:auto;} 

JAVASCRIPT -

function readURL(input) { 
if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
    var imgHeight = $(".previewlogo").height(); 

    reader.onload = function(e) { 
     $('.previewlogo').attr('src', e.target.result) 
     $('.droparea').attr('style', 'height:', imgHeight, 'px;') 
    }; 

    reader.readAsDataURL(input.files[0]); 
} 
} 

Answer 1

을 FileReader 사파리에서 아직 지원되지 않습니다 : http://caniuse.com/#search=filereader

편집 : 이제 서포트입니다 d Safari 6.0 이상 (iOS 및 바탕 화면)