跳到主要內容

如何用 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。然後，針對檔案清單中的每個檔案物件，我們會建立影像縮圖清單並顯示相關聯的檔案名稱。

留言

張貼留言

這個網誌中的熱門文章

設計思考 (Design Thinking)

Design Thinking 101                設計思考也稱作設計思維，設計思考並非專屬於設計師 ; 相反地，設計思考是一種引導創新的方法，它從根本去了解問題的現象，觀察並分析使用者情境並以解決問題，彌補使用者與設計者，在使用、設計產品服務之間的斷層。 每個人只要奠基於創新之上，皆有此種思考取向。設計思考是一個創意解難的過程，透過運用設計思考工具中的的元素。
張貼留言
閱讀完整內容

彩色點陣圖

今天我們利用光的三原色，也就是紅色、綠色、藍色，來表示一張彩色的點陣圖，之前都是以一個數字代表一個點的顏色，可是這次要用六個數字才能代表一個點。 如果我要讓電腦顯示紅色，我要這樣寫：FF0000，前兩個F代表有多少紅色、3，4個代表 有多少 綠色，最後5，6個代表 有多少 藍色， 我用英文字母來表示10以上的數字，A是10，B是11，所以F是16。兩個F是用16進位來表示，第一個F是表示16的0次方有15個，也就是最大值為15，因為若是16就進位了，第二個F表示16的1次方有15個，也就是240，把16和240加起來就會等於16進位的最大值255。總而言之，FF0000就會等於(R=255,G=0,B=0)，電腦就會呈現全紅的畫面，如果是：000000，就會是全黑色因為三原色全部沒有光，就是黑色，那如果是：FFFFFF，就會是全白，因為三原色全部都有，所以是白色。 數值越大，光就越亮，數值越小，光就越暗，這樣總共可以排出一千六百多萬的顏色。 下面有三個圖，可以點選來試試看。
張貼留言
閱讀完整內容

如何讓 button 被點下時，可以執行某一段 JavaScript 程式碼？

範例中第一個部分的原始碼如下： <a href="javascript:open_window('javascript.html')">javascript:function</a>:JavaScript Pseudo Protocol. 一般 來說，href 的內容是 URL，但是我們卻設定了一串頗為奇怪的字串。讓我們解釋一下： Javascript 提供了一個特別的用法，稱之為 JavaScript Pseudo-Protocol， javascript: 之後會加上一個函數名稱， 函數可以是 Javascript 內建的函數，也可以是自行定義的函數。 例如，你可以直接在瀏覽器輸入  javascript:alert(document.links.length)   來得知目前這個網頁總共有多少超連結（links）。 當然，你也可以將這段 程式碼用來取代這個範例的 href 值。 範例中第二個部分的原始碼如下： <form> <input type="button" name="Button1" value="請按我" onClick="sayhi()"> </form> 這是一個 form 元件，該元件內包含一個按鈕元件，該元件名稱為 Button1。 在按鈕元件中，我們也定義了一個事件處理的函數： " onClick="sayhi()" ； 該定義說明了：如果使用者在按鈕上點一下，則執行 sayhi() 函數， 而 sayhi() 的程式碼如下： <script language="javascript"> <!-- function sayhi() { alert("What's up?"); } // --> </script> 如果使用者在"請按我"的按鈕上點一下，螢幕上會出現包含 "What's up?" 訊息的視窗。
張貼留言
閱讀完整內容