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()介して呼び出していたときに機能していましたが、要素で必要な属性チェックを無視していました。だから今、私はの送信イベントを呼び出そうとしていますが、正しく実行されていません。イベントは終了後に呼び出されるはずですが、そうではありません。私はすでにjQueryを試しましたが無駄になりました。.click<input type='submit'><form><input>uploadForm()<form>reader.onloadreader.readDataAsURL().submit()

編集：ついに私の電話でエラー記録をキャッチしました。Uncaught ReferenceError: uploadForm is not defined

4

4 に答える 4

3

関数はuploadFormグローバルスコープにないため、見つかりません。コールバックの外部で関数を定義するか、オブジェクトdocument.readyのプロパティに割り当てることでグローバルにします。window

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

または、jQueryを使用しているため、インラインイベントハンドラーを使用する代わりに、イベントハンドラーをjQueryにバインドすることをお勧めします。

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

Onsubmitは、実行する関数の名前だけでなく、uploadForm（）（つまり、評価する式）に設定する必要があります。

于 2012-12-26T02:46:34.667 に答える
0

コードにいくつかの変更を加えることができると思います。

あなたのuploadForm()関数は

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

他のすべてのものはである可能性がありdocument.ready()ます;

このようにして、リーダーオブジェクトの準備が整い、関数を呼び出すとreadAsDataURL、onLoadイベントがトリガーされます。

これを試して。

于 2012-12-26T02:56:52.057 に答える
0

関数「uploadForm」は別の関数で定義されているため、関数「uploadForm」はDOMからは見えません。あなたのコードでは、別の関数は：を意味します$(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 に答える