Question

这是我的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>

我的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()元素上的.click事件调用<input type='submit'>之前正在运行，但这会忽略<form>所需的属性检查<input>元素。所以现在我尝试在uploadForm()的提交事件上调用<form>，但它运行不正常。应该在reader.onload完成后调用reader.readDataAsURL()事件，但事实并非如此。我已经尝试过jQuery的.submit()无济于事。

编辑：最后用我的手机记录了错误录音。 Uncaught ReferenceError: uploadForm is not defined

Answer 1

uploadForm函数不在全局范围内，因此无法找到。只需定义document.ready回调的外部函数，或通过将其分配给window对象的属性使其全局化：

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

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

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

Answer 2

Onsubmit应设置为uploadForm（）（即您要评估的表达式），而不仅仅是您要执行的函数的名称。

Answer 3

我认为您可以尝试对代码进行一些更改。

您的uploadForm()功能必须只有

reader.readAsDataURL(document.getElementById('file').files[0]);

所有其他内容可以在document.ready();

这样读者对象就可以了，当你调用函数时，readAsDataURL将触发onLoad事件。

试试这个。

Answer 4

函数“uploadForm”由DOM不可见，因为函数“uploadForm”在另一个函数中定义。在您的代码中，另一个函数意味着：$(document).ready(function(){...})。

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

HTML：

<form id="myFormID">
    ....
</form>

JS：

<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>

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

4 个答案: