2

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

4

4 回答 4

3

The uploadForm function is not in global scope, hence it cannot be found. Just define the function outside of the document.ready callback or make it global by assigning it to a property of the window object:

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

Or a better way, since you are using jQuery, is to bind the event handler with jQuery instead of using inline event handlers:

$('#yourFormID').on('submit', function() {
    // ...
});
于 2012-12-26T02:59:02.250 回答
0

DOM 看不到函数“uploadForm”，因为函数“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>
于 2012-12-26T03:20:00.447 回答
0

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

您的uploadForm()函数必须只有

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

所有其他的东西都可以在document.ready();

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

尝试这个。

于 2012-12-26T02:56:52.057 回答
0

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

于 2012-12-26T02:46:34.667 回答