在將localStorage值傳遞到輸入字段時出現問題

好吧，我有一個問題，試圖將存儲在本地存儲中的值傳遞到輸入字段。我發現這個其他線程（Pass a javascript variable value into input type hidden value）顯示瞭如何去做，但它仍然不適合我，我不知道我做錯了什麼。我的整個代碼都在下面，但是我已經將它分離出來，以便更輕鬆地找到真正重要的部分。在將localStorage值傳遞到輸入字段時出現問題

<html> 
    <head> 
<title>Location details</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<script type="text/javascript">

這是我試圖將存儲的值傳遞到字段但沒有運氣的地方。

document.getElementById("plat").value = localStorage.latitude; 
    document.getElementById("plon").value = localStorage.longitude; 

    function fileSelected() {    
     var file = document.getElementById("fileUpload").files[0]; 
     if (file) { 
      var fileSize = 0; 
      if (file.size > 1024 * 1024) { 
       fileSize = (Math.round(file.size * 100/(1024 * 1024))/100).toString() + 'MB'; 
      } 
      else { 
       fileSize = (Math.round(file.size * 100/1024)/100).toString() + 'KB'; 
      } 

      document.getElementById("fileName").innerHTML = 'Name: ' + file.name; 
      document.getElementById("fileSize").innerHTML = 'Size: ' + fileSize; 
      document.getElementById("fileType").innerHTML = 'Type: ' + file.type; 
     } 
    } 

    function uploadFile() { 
     var id = new formData(); 
     id.append("fileUpload", document.getElementById("fileUpload").files[0]); 
     var xhr = new XMLHttpRequest(); 
     xhr.upload.addEventListener("progress", uploadProgress, false); 
     xhr.addEventListener("load", uploadComplete, false); 
     xhr.addEventListener("error", uploadFailed, false); 
     xhr.addEventListener("abort", uploadCancelled, false); 
     xhr.open("POST", "snap.php"); 
     xhr.send(id); 
    } 

    function uploadProgress(evt) { 
     if (evt.lengthComputable) { 
      var percentComplete = Math.round(evt.loaded * 100/evt.total); 
      document.getElementById("progressNumber").innerHTML = percentComplete.toString() + '%'; 
     } 
     else { 
      document.getElementById("progressNumber").innerHTML = 'unable to compute'; 
     } 
    } 

    //================================================================== 
    // These events are raised when the server sends back a response 
    //================================================================== 
    function uploadComplete(evt) { 

     alert(evt.target.responseText); 
    } 

    function uploadFailed(evt) { 
     alert("Therew as an error attempting to upload the file."); 
    } 

    function uploadCancelled(evt) { 
     alert("The upload has been cancelled by the user or the browser dropped the connection."); 
    } 
</script> 
</head> 
<body> 
    <div> 
    <form id="form1" enctype="multipart/form-data" method="post" action="scripts/snap.php">

這是我的輸入字段。他們看起來很好。

 <p> 
      <input id="plat" type="text" value="" /> 
      <input id="plon" type="hidden" value="" /> 
     </p> 
     <div class="row"> 
      <label for="fileUpload">Select an image to Upload</label><br /> 
      <input type="file" name="fileUpload" id="fileUpload" onchange="fileSelected();" /> 
     </div> 
     <div id="filename"></div> 
     <div id="fileSize"></div>  
     <div id="fileType"></div> 
     <div class="row"> 
      <input type="button" onclick="uploadFile()" value="Upload" /> 
     </div> 
     <div id="progressNumber"></div> 
    </form> 
</div> 
</body> 
</html>

來源

2013-04-18 RenegadeScar

試試這個代碼的DOM內容加載之前您調用腳本：

document.addEventListener('DOMContentLoaded', function() { 
     document.getElementById("plat").value = localStorage.latitude; 
     document.getElementById("plon").value = localStorage.longitude; 
    }, false); 


    function fileSelected() { 
     var file = document.getElementById("fileUpload").files[0]; 
     if (file) { 
      var fileSize = 0; 
      if (file.size > 1024 * 1024) { 
       fileSize = (Math.round(file.size * 100/(1024 * 1024))/100).toString() + 'MB'; 
      } 
      else { 
       fileSize = (Math.round(file.size * 100/1024)/100).toString() + 'KB'; 
      } 

      document.getElementById("fileName").innerHTML = 'Name: ' + file.name; 
      document.getElementById("fileSize").innerHTML = 'Size: ' + fileSize; 
      document.getElementById("fileType").innerHTML = 'Type: ' + file.type; 
     } 
    } 

    function uploadFile() { 
     var id = new formData(); 
     id.append("fileUpload", document.getElementById("fileUpload").files[0]); 
     var xhr = new XMLHttpRequest(); 
     xhr.upload.addEventListener("progress", uploadProgress, false); 
     xhr.addEventListener("load", uploadComplete, false); 
     xhr.addEventListener("error", uploadFailed, false); 
     xhr.addEventListener("abort", uploadCancelled, false); 
     xhr.open("POST", "snap.php"); 
     xhr.send(id); 
    } 

    function uploadProgress(evt) { 
     if (evt.lengthComputable) { 
      var percentComplete = Math.round(evt.loaded * 100/evt.total); 
      document.getElementById("progressNumber").innerHTML = percentComplete.toString() + '%'; 
     } 
     else { 
      document.getElementById("progressNumber").innerHTML = 'unable to compute'; 
     } 
    } 

    //================================================================== 
    // These events are raised when the server sends back a response 
    //================================================================== 
    function uploadComplete(evt) { 

     alert(evt.target.responseText); 
    } 

    function uploadFailed(evt) { 
     alert("Therew as an error attempting to upload the file."); 
    } 

    function uploadCancelled(evt) { 
     alert("The upload has been cancelled by the user or the browser dropped the connection."); 
    }

來源

2013-04-18 05:34:58

真棒，謝謝！這就像一個魅力。所以還有一個問題，因爲我只是想在這裏理解一些東西。什麼時候我應該擔心使用document.addEventListener（'DOMContentLoaded'，...部分每當我編碼？ – RenegadeScar 2013-04-18 05:46:07

每當你想在頁面的開始加載時使用html內容播放，你可以調用DOMContentLoaded事件 – 2013-04-18 05:48:19

哦，我看，這是有道理的。非常感謝你的幫助，我不確定我是否也感謝你提供了我昨天提出的另一個問題的建議。謝謝！ – RenegadeScar 2013-04-18 05:50:00

在將localStorage值傳遞到輸入字段時出現問題

回答

相關問題