未捕获的ReferenceError：[function_name]未定义

Question

我有一个上传文件按钮。

注意：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;
}

JS

 $(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放在一起。

Answer 1

您从onXyz属性样式处理程序调用的函数必须是全局变量，但您的getFile函数不是全局函数，只能从load回调中访问。 （这很好.Globals是一件坏事。^（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() {
    // ...
});

Answer 2

删除$(window).load处理程序，以便该函数位于全局范围内，并且它将起作用。

当函数在load处理程序内部时，它仅在该范围内是本地的，并且无法从需要该函数位于全局范围内的内联处理程序访问。

FIDDLE

另请注意，除非您将左侧的下拉列表更改为onload，否则jsFiddle会将该函数包装在其自己的"nowrap in ***"处理程序中。

你应该使用jQuery的事件处理程序。