在将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值传递到输入字段时出现问题

回答

相关问题