的JavaScript沒有被調用的內聯事件處理程序

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> 

當我通過在一個.click事件調用uploadForm()此代碼是之前工作<input type='submit'>元素，但會忽略<form>對<input>元素的必需屬性檢查。所以現在我試圖在<form>的提交事件上致電uploadForm()，但它運行不正常。 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>