javascript - 未捕获的ReferenceError:未定义[function_name]

我有一个上传文件按钮。

注意：onclick="getFile()"

因此，单击btn时将调用getFile()函数。

的HTML

<center>
    <form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
        <div id="yourBtn" onclick="getFile()">click to upload a file</div>
        <div style='height: 0px;width: 0px; overflow:hidden;'>
            <input id="upfile" type="file" value="upload" onchange="sub(this)" />
        </div>
    </form>
</center>

的CSS

#yourBtn {
    position: relative;
    top: 150px;
    font-family: calibri;
    width: 150px;
    padding: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border: 1px dashed #BBB;
    text-align: center;
    background-color: #DDD;
    cursor:pointer;
}

 $(window).load( function () {

     // executes when complete page is fully loaded, including all frames, objects and images
     function getFile() {
         document.getElementById("upfile").click();
     }

     function sub(obj) {
         var file = obj.value;
         var fileName = file.split("\\");
         document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
         document.myForm.submit();
         event.preventDefault();
     }

 });

我尝试将我所有的JS代码放在$(window).load( function (){});

我在控制台上不断收到错误消息，说Uncaught ReferenceError: getFile is not defined

为什么会这样，我该如何解决？

如果需要，我将my FIDDLE here放在一起。

最佳答案

从onXyz属性样式处理程序调用的函数必须是全局函数，但是getFile函数不是全局函数，只能从load回调内部访问。（这很好。全局变量是一件坏事。（tm））

最好的选择是从load内连接处理程序（与sub相同）：

<div id="yourBtn">click to upload a file</div>
<!-- ... -->
<input id="upfile" type="file" value="upload" />

然后：

$(window).load( function () {

    $("#yourBtn").on("click", getFile);
    $("#upfile").on("change", sub);

    // ...

});

偏离主题，但您可能还考虑使用$(window).load(...)以外的其他方法，这在页面加载过程中非常晚。如果您控制script标记的位置，只需将script标记放在文件的末尾，紧接</body>标记之前，然后进行更改

$(window).load(function() {
    // ...
});

至

(function() {
    // ...
})();

如果您不控制script标记的位置，那么第二好的解决方案是使用jQuery的ready回调：

$(function() {
    // ...
});

GetFile

javascript - 未捕获的ReferenceError:未定义[function_name]