未在内联事件处理程序中调用JavaScript

以下是我的JavaScript：

<script>
    //Make sure DOM is ready before mucking around.
    $(document).ready(function()
    {
        console.log('DOM is ready!');
        var socket = io.connect('http://localhost:8080');
        //Each document field will have the following identifiers:
        //classCode, description, professor, file
        function uploadForm()
        {
            console.log('Creating FileReader object...');
            var reader = new FileReader();
            reader.onload = function(evt)
            {
                console.log('Read complete.');
                console.log('Creating JSON object...')
                var documentData = 
                {
                    'classCode':$('#classCode').val(),
                    'professor':$('#professor').val(),
                    'description':$('#description').val(),
                    'file': 
                        {
                            'data': evt.target.result,
                            'metadata': document.getElementById('file').files[0]
                        },
                    'dateUploaded':new Date(),
                    'rating':0 
                };
                console.log(documentData);
                console.log('Adding document.');
                socket.emit('addDocument', documentData);
            };
            console.log('Reading as binary string...');
            reader.readAsDataURL(document.getElementById('file').files[0]);
        };
    });
</script>

//在乱搞之前，确保DOM准备好了。
$（文档）.ready（函数（）
{
log（'DOM已准备就绪！'）；
var socket=io.connect（'http://localhost:8080');
//每个文档字段将具有以下标识符：
//类代码、描述、教授、文件
函数uploadForm（）
{
log（'正在创建FileReader对象…'）；
var reader=new FileReader（）；
reader.onload=函数（evt）
{
console.log（'读取完成'）；
log（'正在创建JSON对象…'）
var documentData=
{
“类代码”：$（“#类代码”）.val（），
'教授'：$（'教授'）.val（），
'description'：$（'#description'）.val（），
“文件”：
{
“数据”：evt.target.result，
“元数据”：document.getElementById（'file'）。文件[0]
},
“dateUploaded”：新日期（），
“评级”：0
};
控制台日志（文档数据）；
console.log（“添加文档”）；
发出（'addDocument'，documentData'）；
};
log（'读取为二进制字符串…'）；
reader.readAsDataURL（document.getElementById（'file'）.files[0]）；
};
});

我的HTML表单：

<form onsubmit = 'uploadForm()'>
        <input type = 'text' placeholder = 'Class code' id = 'classCode' required/>
        <input type = 'text' placeholder = 'Document description' id = 'description' required/>
        <input type = 'text' placeholder = 'Professor' id = 'professor' required/>
        <input type = 'file' id = 'file' required/>
        <input type = 'submit' value = 'Upload!'/>
    </form>

当我通过

调用
uploadForm（）
时，此代码以前是有效的。单击
元素上的
事件，但这将忽略
元素上的
所需属性检查。因此，现在我试图在
的提交事件上调用
uploadForm（）
，但它没有正常运行
reader.onload
事件应在
reader.readDataAsURL（）完成后调用，但实际情况并非如此。我已经试过jQuery的
.submit（）
，但没有用

编辑：终于捕捉到了用我的手机录制的错误<代码>未捕获引用错误：未定义uploadForm
Onsubmit应设置为uploadForm（）（即您要计算的表达式），而不仅仅是要执行的函数的名称。
我认为您可以尝试对代码进行一些更改

您的
uploadForm（）
函数必须只有

reader.readAsDataURL（document.getElementById（'file'）.files[0]）

所有其他东西都可以放在
document.ready（）

这样，读卡器对象将准备就绪，当您调用函数时，
readAsDataURL
将触发onLoad事件

试试这个。
uploadForm
函数不在全局范围内，因此无法找到它。只需在
文档的外部定义函数。ready
回调或通过将其分配给
窗口的属性使其成为全局函数
对象：

window.uploadForm = function() {
    // ...
};

或者，由于您使用的是jQuery，因此更好的方法是将事件处理程序与jQuery绑定，而不是使用内联事件处理程序：

$('#yourFormID').on('submit', function() {
    // ...
});

函数“uploadForm”在DOM中是不可见的，因为函数“uploadForm”是在另一个函数中定义的。在代码中，另一个函数的意思是：
$（document）.ready（function（）{…}）

在jQuery中，可以像这样绑定事件：

HTML:


....

JS:


//在乱搞之前，确保DOM准备好了。
$（文档）.ready（函数（）
{
log（'DOM已准备就绪！'）；
var socket=io.connect（'http://localhost:8080');
//每个文档字段将具有以下标识符：
//类代码、描述、教授、文件
函数uploadForm（）
{
//....
};
// ↓↓↓↓↓在此绑定事件↓↓↓↓↓
$（“#myFormID”）。提交（上传形式）；
});
仍然不起作用。我还尝试了onsubmit='uploadForm（）；'，onsubmit='uploadForm（）'，onsubmit='uploadForm（）；'onSubmit='uploadForm（）'
<form id="myFormID">
    ....
</form>

<script>
    //Make sure DOM is ready before mucking around.
    $(document).ready(function()
    {
        console.log('DOM is ready!');
        var socket = io.connect('http://localhost:8080');
        //Each document field will have the following identifiers:
        //classCode, description, professor, file
        function uploadForm()
        {
            //....
        };

        // ↓↓↓↓↓Bind events here↓↓↓↓↓
        $("#myFormID").submit(uploadForm);
    });
</script>