valums 파일 업로드 - 크롬하지만

Question

다음은 파이어 폭스와 인터넷 익스플로러에서 작동 코드를

JS

$(window).load(function(){ 
     //File Uploader 
     function createUploader(){ 
      var uploader = new qq.FileUploader({ 
      element: document.getElementById('fileUploaderButton'), 
      action: 'upload.php', 
      debug: true 
     }); 
     createUploader();  
} 

업 로더가 생성 된 후 DOM이다

<button id="fileUploaderButton" style="border-radius: 5px 5px 5px 5px;"> 
    <div class="qq-uploader"> 
    <div class="qq-upload-drop-area" style="display: none;"> 
     <span>Drop files here to upload</span> 
    </div> 
    <div class="qq-upload-button" title="Upload photo" style="position: relative; overflow: hidden; direction: ltr;"> 
     Upload photo 
     <input type="file" multiple="multiple" name="file" style="position: absolute; right: 0pt; top: 0pt; font-family: Arial; font-size: 118px; margin: 0pt; padding: 0pt; cursor: pointer; opacity: 0;"> 
     </div> 
     <ul class="qq-upload-list"></ul> 
    </div> 
</button> 

'.qq-uploader'div를 클릭하면 파일 브라우저가 팝업되지만 Chrome에서만 표시됩니다. # fileUploaderButton의 커서는 포인터이지만 qq-uploader의 ID는 정상입니다. qq-uploader div가 버튼보다 작습니다. 크롬에서는 마우스가 qq-uploader 위에있을 때 커서가 바뀝니다. 인터넷 익스플로러 나 파이어 폭스에서는 파이어 버그 (Firebug)가 그 요소가 있음을 보여 주더라도 그렇게하지 않는다.

Answer 1

동일한 문제가있어서 컨테이너 요소를 변경하여 해결했습니다. 업 로더 (귀하의 경우 button#fileUploaderButton)에서 변형하려는 DOM 요소가 버튼이면 작동하지 않습니다. div 또는 span을 사용하면 효과가 있거나 적어도 저에게는 효과적입니다. 귀하의 경우, HTML에서 :

<div id="fileUploaderButton">Upload</div> 

및 자바 스크립트 :

$(window).load(function(){ 
    function createUploader(){ 
     var uploader = new qq.FileUploader({ 
     element: document.getElementById('fileUploaderButton'), 
     action: 'upload.php', 
     debug: true 
    }); 
    createUploader();  
}