Javascript DOM 鼠标事件不适用于 IE 和 Mozilla答案

【问题标题】：Javascript DOM Mouse Event is not working for IE and MozillaJavascript DOM 鼠标事件不适用于 IE 和 Mozilla
【发布时间】：2012-04-18 02:23:21
【问题描述】：

正在开发自定义文件上传应用程序。我有两个主要问题：

下面给出的代码不是为 Mozilla 和 IE 打开文件对话框。
在 Chrome 中它可以工作，但是当我在第一次单击时选择文件时，它永远不会将文件添加到正文中。但是在第二次单击时，它将在第一次单击中浏览的文件添加到正文中。

对上述问题的任何帮助将不胜感激。

功能 perform1Click(节点) { 警报（“初始化”）； var evt = document.createEvent("MouseEvents"); evt.initEvent("点击", true, false); node.dispatchEvent(evt); 警报(3) 获取文件（evt）； } 函数获取文件（事件）{ var 文件 = event.target.files; 变量总大小 = 0; 如果（总大小> 1024 * 10）{ alert('总大小超过 1 Mb。'); 返回; } //警报（文件） //警报（文件长度）； for (var i = 0, f; f = files[i]; i++) { 显示文件列表（f.name，f.size）；总尺寸=总尺寸+f.size； } } 函数显示文件列表（名称，大小）{ 如果（名称！=''）{ var top_plugin = document.getElementById('top_plugin'); // 创建标签 var ptag = document.createElement("p"); // 创建 div var divBox = document.createElement("div"); divBox.setAttribute('class', 'divBox'); // 创建输入[type='checkbox'] var inputCheckBox = document.createElement("input"); inputCheckBox.setAttribute('type', 'checkbox'); inputCheckBox.setAttribute('id', 'checkboxClass') // 将复选框添加到 div。 divBox.appendChild(inputCheckBox); // 为 divBox 创建文本节点并将其添加到 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); // 将 divBox 添加到 ptag。 ptag.appendChild(divBox); //ptag.appendChild(divTxt); // 添加 ptag 到 top_plugin div。 top_plugin.appendChild(ptag); } // 如果文件值不为空，则设为空白。如果（名称！=''） { 名称 = ''; } }

【问题讨论】：

如何将 perform1Click 附加到事件。 Arg 必须是 Event。

标签： javascript dom file-upload

【解决方案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 中不起作用。对于 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 巴拉特

【讨论】：