如何用 JavaScript 讀取 input 裡面的內容？





<!DOCTYPE html>
<html>
  <head>
    <title>&lt;input&gt; File Selection</title>
    <meta http-equiv="X-UA-Compatible" content="IE=10">
  </head>
  <body>
    <h1>HTML5 &lt;input&gt; File Selection</h1>
    <h3>Example 1</h3>
    <input type="file" id="fileSelector" multiple accept="image/*" /> <!-- By design, if you select the exact same files two or more times, the 'change' event will not fire. -->
    <ul id="fileContentList" style="list-style-type: none;"></ul> <!-- This will be populated with <li> elements via JavaScript. -->
    <script type="text/javascript">
      var message = [];

      if (!document.getElementById('fileSelector').files) {
        message = '<p>The ' +
                  '<a href="http://dev.w3.org/2006/webapi/FileAPI/" target="_blank">File API</a>s ' +
                  'are not fully supported by this browser.</p>' +
                  '<p>Upgrade your browser to the latest version.</p>';
      
        document.querySelector('body').innerHTML = message;
      }
      else {
        document.getElementById('fileSelector').addEventListener('change', handleFileSelection, false); // Add an onchange event listener for the <input id="fileSelector"> element.
      }
      
      function handleFileSelection(evt) {    
        var files = evt.target.files; // The files selected by the user (as a FileList object).
  
        if (!files) {
          msa.alert("<p>At least one selected file is invalid - do not select any folders.</p><p>Please reselect and try again.</p>");
          return;
        }

        // The variable "files" is an array of file objects. 
        for (var i = 0, file; file = files[i]; i++) {
          var img_element = document.createElement('img'); // We've only allowed the user to select graphics files, so get ready to display them.
          img_element.src = window.URL.createObjectURL(file); // Assumes "file" is some sort of graphics file type.
          img_element.width = 150; // Make all images the same width.
          img_element.style.verticalAlign = "middle"; // Center the image in the middle of adjacent text.
          img_element.style.margin = "4px 4px 4px 0";
          img_element.onload = function() { window.URL.revokeObjectURL(this.src); } // The file URL is not needed once the file image has been fully loaded.
          
          var span_element = document.createElement('span');
          span_element.innerHTML = file.name;
          
          var li_element = document.createElement('li');
          li_element.appendChild(img_element);
          li_element.appendChild(span_element);
          
          document.getElementById('fileContentList').appendChild(li_element);
        } // for
      } // handleFileSelection
    </script>  
    <script src="../utilities.js" type="text/javascript"></script> <!-- Provides the msa.alert() method. -->
  </body>
</html>


在上述範例中，<meta http-equiv="X-UA-Compatible" content="IE=10"> 會指示 Windows Internet Explorer 以 IE10 模式顯示網頁。如需詳細資訊，請參閱定義文件相容性。

script 區塊放在 body 區塊的結尾，一般來說可改善效能，但更重要的是可允許存取先前轉譯的 DOM 元素 (例如 <input type="file" id="fileSelector" multiple accept="image/*" />)。

如果沒有特定的檔案 API 功能，則以 HTML 取代之前的所有標記，警告使用者必要的「檔案 API」功能無法使用。否則，請新增事件接聽程式 (handleFileSelection) 以接聽input 元素上的任何變更。
使用者選取一或多個檔案 (透過 input 元素) 時，會引發 change 事件並叫用 handleFileSelection 函式。傳遞到 handleFileSelection 的事件物件含有使用者所選的檔案清單，也就是 evt.target.files。然後，針對檔案清單中的每個檔案物件，我們會建立影像縮圖清單並顯示相關聯的檔案名稱。
Melody的程式天地

搜尋此網誌

如何用 JavaScript 讀取 input 裡面的內容？

留言

張貼留言

這個網誌中的熱門文章

JSON資料格式

16進位換算器

設計思考 (Design Thinking)
