javascript - Uncaught ReferenceError : [ function_name ] is not defined

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 内部访问打回来。 (这很好。全局变量是一件坏事。^(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() {
    // ...
});