IEとMozillaではJavascript DOMマウスイベントが機能しません

Question

カスタムファイルアップロードアプリケーションで作業しています。私は2つの大きな問題があります：

1. 次のコードは、MozillaとIEのファイルダイアログボックスを開くのではありません。
2. Chromeでは動作しますが、[ファイルを最初にクリック]を選択すると、ファイルが本体に追加されることはありません。しかし、2度目のクリックでは、最初のクリックでブラウズされたファイルが本文に追加されます。

上記の問題については、お手数ですが、

 
function perform1Click(node) { 

      alert("INIT"); 
      var evt = document.createEvent("MouseEvents"); 
      evt.initEvent("click", true, false); 
      node.dispatchEvent(evt); 

      alert(3) 
      getFile(evt); 

     } 

     function getFile(event) { 

      var files = event.target.files; 
      var totalSize = 0; 

      if (totalSize > 1024*10) { 

       alert('Total size exceed 1 Mb.'); 
       return; 
      } 
      //alert(files) 
      //alert(files.length); 
      for (var i = 0, f; f = files[i]; i++) { 

       displayFileList(f.name, f.size); 
       totalSize = totalSize+f.size; 
      } 
     } 

     function displayFileList(name, size) { 

      if (name != '') { 

       var top_plugin = document.getElementById('top_plugin'); 

       // create tag 
       var ptag = document.createElement("p"); 

       // create div 
       var divBox = document.createElement("div"); 
       divBox.setAttribute('class', 'divBox'); 

       // create input[type='checkbox'] 
       var inputCheckBox = document.createElement("input"); 
       inputCheckBox.setAttribute('type', 'checkbox'); 
       inputCheckBox.setAttribute('id', 'checkboxClass') 

       // add checkbox to div. 
       divBox.appendChild(inputCheckBox); 

       // create text node for divBox and add it to divBox. 
       var txtNode = document.createTextNode(name); 
       divBox.appendChild(txtNode) 

       var sizeDivBox = document.createElement("p"); 
       sizeDivBox.setAttribute('style', 'clear:both; display: inline-block;'); 

       var txtSizeNode = document.createTextNode(size); 
       sizeDivBox.appendChild(txtSizeNode); 
       divBox.appendChild(sizeDivBox); 

       // add divBox to ptag. 
       ptag.appendChild(divBox); 
       //ptag.appendChild(divTxt); 

       // add ptag to top_plugin div. 
       top_plugin.appendChild(ptag); 
      } 

      // if file value is not null, make it blank. 
      if (name != '') 
      { 
       name = ''; 
      } 
     } 

Answer 1

私は同じ問題を解決しました。新しいコードを以下で見つけてください。

function uploadDFiles() { 

     var file = document.getElementById('_file'); 
     file.click(); 

     try { 
      file.addEventListener("change", getFileName); 
     } 
     catch (e) { 
      file.attachEvent("onclick", getFileNameOnIE); 
      alert("Error:: "+e.description); 
     } 
    } 

    function getFileName(event) { 

     var files = event.target.files; 
     for (var i = 0, f; f = files[i]; i++) { 

      var fileName = f.name; 
      var fileSize = f.size; 

      var fSize = bytesToSize(fileSize, 2); 

      displayFileList(fileName, fSize); 
     } 
    } 

しかし、今私は新しい問題があります。このコードはIEで動作していません。私はattachEventメソッドを使用しています。以下のコードをご覧ください：

function getFileNameOnIE(event) { 

     alert(event.type); 
     var files = event.target; 
     alert(files.length); 

     for (var i = 0, f; f = files[i]; i++) { 

      displayFileList(f.name, f.size); 
     } 
    } 

誰かが私に同じ解決策を提供できますか？

-

TKS バーラト