跳到主要內容

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

留言

這個網誌中的熱門文章

16進位換算器

這是16進位換算器的流程圖, 假如我輸入"fe",電腦會先把左邊的"f"當成第一個,再判斷等於多少,所以左邊流程圖內的第一個紫色方塊內的result要乘以16加15,因為16進位的第一個數字是16的0次方。後來電腦又發現後面還有數字,所以它又把result乘上16,這時候,result已經是16的1次方了,然後在加14,以此類推。例如:"A7FE3"的10進位是688099 換算 Answer is

考拉茲猜想

我們利用"pseudo code"來寫出"考拉茲猜想"的驗證程式。"pseudo code"就是虛擬碼,它是半不標準的語言。我們可以將整個執行過程的結構用接近自然語言的形式(例如中文、英文),重點是將程式的意思表達出來描述出來。"考拉茲猜想",如果今天有一個正整數是"奇數",就要乘以3再加1;如果是"偶數",就要除以2,如此循環,到最後一定會得到1。例如:5的順序是:16,8,4,2,1;最後也是1。這是我用"pseudo code"寫的流程圖:    " 設定 N = 一個數字 在 N = 1以前,重複以下動作: 如果 N 除以 2 的餘數 = 0 N = N / 2 否則 N = N * 3 + 1 " 下面是我用scratch和javascript做的專案。   考拉茲猜想

介紹版本控管程式 - git

Git介紹 Git為分散式版本控制系統,是為了更好管理Linux內核而開發的。 Git可以把檔案的狀態作為更新歷史記錄保存起來。因此可以把編輯過的檔案復原到以前的狀態,也可以顯示編輯過內容的差異。 而且,當有人想將編輯過的舊檔案上傳到伺服器、覆蓋其他人的最新檔案時,系統會發出警告,因此可以避免在無意中覆蓋他人的編輯內容。 為什麼需要版本控管? 有時候我們的心血會因為人為疏失(例如:忘了存檔、檔案互相覆蓋、檔案因系統當機遺失)而全部不見,所以我們需要版本控管。版本控管系統提供了一個地方讓你集中存放撰寫過程中的所有程式檔案及文件,以便達到集中控管的目的。