如何正确使用IE的onchange元素

时间:2019-05-11 15:23:14

标签: javascript jquery internet-explorer upload onchange

对于上传文件,我使用以下形式:

<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
  <div id="drag_upload_file">                                               
    <p>DROP FILE(S) HERE</p>
    <p>or</p>

    <p><input class="browse btn" type="button" id="browse" value="Browse" onclick="file_explorer();"></p>
    <input type="file" id="selectfile" name="upload" multiple>

   </div>
</div>

这部分js

 function file_explorer() {

        document.getElementById('selectfile').click();
        document.getElementById('selectfile').onchange = function() {
            for (var i=0; i< this.files.length;i++){ // multiple files uploading
              fileobj = document.getElementById('selectfile').files[i];
              ajax_file_upload(fileobj);
            }
        };

    }

除了IE之外,上载均可在所有浏览器中使用。我已经发现IE和onchange存在问题。

有没有一种方法可以重写函数file_explorer,使其也可以在IE中正常工作?

1 个答案:

答案 0 :(得分:0)

尝试使用JavaScript方法附加ondrop函数,请如下修改您的代码:

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function myFunction() {
            document.getElementById('selectfile').ondrop = function () {                    
                document.getElementById('selectfile').click();
                document.getElementById('selectfile').onchange = function () {
                    for (var i = 0; i < this.files.length; i++) { // multiple files uploading
                        fileobj = document.getElementById('selectfile').files[i];
                        //ajax_file_upload(fileobj);
                    }
                };
            };
        };
    </script>
</head>
<body onload="myFunction()">
    <div id="drop_file_zone" ondragover="return false">
        <div id="drag_upload_file">
            <p>DROP FILE(S) HERE</p>
            <p>or</p>

            <p><input class="browse btn" type="button" id="browse" value="Browse" onclick="file_explorer();"></p>
            <input type="file" id="selectfile" name="upload" multiple>

        </div>
    </div>
</body>