Onclick FILE上傳DOM PHP jquery

我想上傳文件到我點擊一個按鈕時所做的PHP腳本。我只是在JavaScript的頭幾個小時，我真的不明白JS v動態加載HTML的結構，所以我在這裏。Onclick FILE上傳DOM PHP jquery

當菜單鏈接被點擊時，它從另一個文件加載HTML罰款。加載的HTML文件上傳表單具有禁用的提交按鈕。當該按鈕被擊中時，我試圖向服務器做一個XMLHttpRequest並上傳該文件。我第一次嘗試，它無法找到具有該ID的DOM元素，因爲它尚未加載。所以，我在單擊菜單時加載HTML的函數中移動了該函數。現在，我沒有收到空錯誤，但是當我點擊按鈕時沒有任何反應？爲什麼提交按鈕onclick事件不會觸發？

HTML被加載

<div id="form-wrapper"> 
<p> 
    Please upload a Material List. 
</p> 
</br> 
</br> 
<form id="form" method="post" action="#" enctype="multipart/form-data"> 
    <p>     
     <label class="label" for="file">Material List</label>    
     <input class="file-input" type="file" name="file" id="file"/>     
    </p> 
</br> 
</br> 
    <p> 
     <input id="submit" value="Upload File" disabled="disabled" type="submit"/> 
    </p> 
</form> 
</div>

這裏是加載HTML和應該被設置的onclick監聽器JavaScript的...

$(document).on("click","#mrp-new",function(e){ 
    $("#container").load("../html/mrp_new_order.html"); 
    $(document).on("click","#submit",function(e) 
    { 
     var file = this.files[0];  
     var fd = new FormData(); 
     fd.append("file", file);   
     var xhr = new XMLHttpRequest(); 
     xhr.open('POST', '../php/mrp_upload.php', true);   

     xhr.upload.onprogress = function(e) 
     { 
      if (e.lengthComputable) 
      { 
       var percentComplete = (e.loaded/e.total) * 100; 
       console.log(percentComplete + '% uploaded'); 
      } 
     }; 

     xhr.onload = function() 
     { 
      if (this.status == 200) 
      { 
       var resp = JSON.parse(this.response); 
       alert('Server got:', resp); 
       /*var image = document.createElement('img'); 
       image.src = resp.dataUrl; 
       document.body.appendChild(image);*/ 
      }; 
     };  
     xhr.send(fd); 
    }, false); 
});

在此先感謝您的幫助！

彌敦道

來源

2013-03-21 nathansizemore

您不能設置一個onclick，或爲此事向被禁用按鈕的任何監聽器。谷歌之後我發現了一下。

我改變

<input id="submit" value="Upload File" disabled="disabled" type="submit"/>

到

<button id="submit" type="button"/>

，一切工作正常。

來源

2013-03-21 17:51:22 nathansizemore

閱讀有關文件現成$。就緒here和Ajax調用使用jQuery here。

作爲第二個參數的加載函數可以使用在加載完成後調用的函數。 link

$("#container").load("../html/mrp_new_order.html", function() { 
    alert('Load was performed.'); 
});

儘量聽取提交表單的事件，而不是

$("#container").load("../html/mrp_new_order.html", function() { 
    $('#form').submit(function() { 
     alert('Submit button was pressed'); 
     return false; 
    }); 
});

來源

2013-03-21 15:32:28 Damian0o

如果該函數被調用時文檔還沒有準備好，我會收到一個類型錯誤，說我不能將函數賦值爲null，是否正確？ @ Damian0o – nathansizemore 2013-03-21 15:39:27

您的第一個位吐出了一個預期的警報，但是當我添加第二段代碼並按下提交按鈕時，我什麼也沒有得到。會禁用HTML中的按鈕是原因嗎？ – nathansizemore 2013-03-21 16:08:47

Onclick FILE上傳DOM PHP jquery

回答

相關問題