整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
eb頁面， 一般是HTML頁面，是Internet組織 信息的基礎元素。Web頁面元素提取是一類常見 問題，在網絡爬蟲、瀏覽器等程序中有著不可或 缺的重要作用。
HTML指超文本標記語言，嚴格來說，HTML不 是一種編程語言，而是一種對信息的標記語言， 對Web的內容、格式進行描述。
自動地從一個鏈接獲取HTML頁面是簡單網絡爬蟲的功能，可以整體分成如下4個步驟：
根據上述步驟，可以寫出主程序如下。其中設置 了4個函數getHTMLlines()、extractImageUrls()、 showResults()和saveResults()分別對應上述4個步驟。
getHTMLlines()：讀取保存在本地的html文件
extractImageUrls()：解析并提取其中的圖片鏈接
showResults()：輸出提取結果到屏幕
saveResults()：保存提取結果為文件
代碼：
def main(): inputfile='nationalgeographic.html' outputfile='nationalgeographic-urls.txt' htmlLines=getHTMLlines(inputfile) imageUrls=extractImageUrls(htmlLines) showResults(imageUrls) saveResults(outputfile, imageUrls)
定義main()函數的目的是為了讓代碼更加清晰， 作為主程序，也可以不采用函數形式而直接編寫。 main()前兩行分別制定了擬獲取HTML文件的路 徑和結果輸出路徑。
getHTMLlines()函數讀取HTML文件并內容， 并將結果轉換為一個分行列表，為了兼容不同編 碼，建議在open()函數中增加encoding字段，設置采用UTF-8編碼打開文件。
def getHTMLlines(htmlpath): f=open(htmlpath, "r", encoding='utf-8') ls=f.readlines() f.close() return ls
extractImageUrls()是程序的核心，用于解析文件并提取圖像的URL。
def extractImageUrls(htmllist):
urls=[]
for line in htmllist:
if 'img' in line:
url=line.split('src=')[-1].split('"')[1]
if 'http' in url:
urls.append(url)
return urls
showResults()函數將獲取的鏈接輸出到屏幕上，增加一 個計數變量提供更好用戶體驗。
def showResults(urls):
count=0
for url in urls:
print('第{:2}個URL:{}'.format(count, url))
count +=1
在 HTML 文檔中 <input type="file"> 標簽每出現一次，一個 FileUpload 對象就會被創建。
該元素包含一個文本輸入字段，用來輸入文件名，還有一個按鈕，用來打開文件選擇對話框以便圖形化選擇文件。
該元素的 value 屬性保存了用戶指定的文件的名稱，但是當包含一個 file-upload 元素的表單被提交的時候，瀏覽器會向服務器發送選中的文件的內容而不僅僅是發送文件名。
當用戶選擇或編輯一個文件名，file-upload 元素觸發 onchange 事件句柄。
看個簡單例子：
[html]view plaincopy
<!--?oscar999??-->??<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">??<html>????<head>????<meta?http-equiv="content-type"?content="text/html;?charset=utf-8">????<meta?name="author"?content="oscar999">????<title></title>????<script>????function??handleFiles(files)????{??????if(files.length)??????{?????????var?file?=?files[0];?????????var?reader?=?new?FileReader();?????????reader.onload?=?function()?????????{?????????????document.getElementById("filecontent").innerHTML?=?this.result;?????????};?????????reader.readAsText(file);??????}????}????</script>????</head>????<body>????<input?type="file"?id="file"?onchange="handleFiles(this.files)"/>????<div?id="filecontent"></div>????</body>??</html>??這里讀取一個文件， 顯示在div 中。
(在IE8 中 無效， this.files 無法讀取文件。這個屬于HTML5 的特性)
當選擇了一個文件時，就會把包含這個文件的列表（一個FileList對象）作為參數傳給handleFiles()函數了。這個FileList對象類似一個數組，可以知道文件的數目，而它的元素就是File對象了。從這個File對象可以獲取name、size、lastModifiedDate和type等屬性。把這個File對象傳給FileReader對象的讀取方法，就能讀取文件了。
Html5 支持的File 的操作不僅僅是文件的選擇，
在HTML5 之前需要使用 Applet 和 SilverLight 才能達到的文件拖拽功能，在HTML5 中也能輕松的實現，
看代碼：
[html]view plaincopy
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">??<html>????<head>????<meta?http-equiv="content-type"?content="text/html;?charset=utf-8">????<meta?name="author"?content="oscar999">????<title></title>????</head>????<body>??????<div?id="dropbox">?Drop?Here?</div>??????<div?id="filecontent"></div>??????<script>????????var?dropbox?=?document.getElementById("dropbox");??????????dropbox.addEventListener("dragenter",?dragenter,?false);??????????dropbox.addEventListener("dragover",?dragover,?false);??????????dropbox.addEventListener("drop",?drop,?false);?????????function?dragenter(e)?{????????????e.stopPropagation();????????????e.preventDefault();????????}????????function?dragover(e)?{????????????e.stopPropagation();????????????e.preventDefault();????????}??????function?drop(e)?{????????????e.stopPropagation();????????????e.preventDefault();?????????????var?dt?=?e.dataTransfer;????????????var?files?=?dt.files;??????????if(files.length)??????????{?????????????var?file?=?files[0];?????????????var?reader?=?new?FileReader();?????????????reader.onload?=?function()?????????????{?????????????????document.getElementById("filecontent").innerHTML?=?this.result;?????????????};?????????????reader.readAsText(file);??????????}??????}???????</script>????</body>??</html>??這里通過事件對象的 dataTransfer 可以得到文件。
在第一個例子中， 我們使用 FileReader類來讀取文件的內容，
在 W3C 草案中，File 對象只包含文件名，文件類型等只讀屬性;FileReader用于內容讀取和監控讀取狀態。
（在firefox 中， 可以直接使用 var fileBinary=file.getAsBinary(); 讀取文件的二進制源碼）
FileReader提供的方法包括：
1. readAsBinaryString
2. readAsDataURL
3. readAsText
4. abort
.........
以下，舉一個 使用 FileReader 將用戶選擇的圖片不通過后臺即時顯示出來的例子。
[html]view plaincopy
function?handleFiles(files){??????for?(var?i?=?0;?i?<?files.length;?i++)?{??????????var?file?=?files[i];??????????var?imageType?=?/image.*/;??????????if?(!file.type.match(imageType))?{??????????????continue;??????????}??????????var?img?=?document.createElement("img");??????????img.classList.add("obj");??????????img.file?=?file;??????????preview.appendChild(img);??????????var?reader?=?new?FileReader();??????????reader.onload?=?(function(aImg){??????????????return?function(e){??????????????????aImg.src?=?e.target.result;??????????????};??????????})(img);??????????reader.readAsDataURL(file);??????}??}??在一般的HTML 中，使用方式是把file input 放在form 中， 以POST 方式把文件傳遞到后端。
在 HTML5 中， 也可以通過 FileReader 的 readAsBinaryString 方法讀取到文件的二進制碼，然后通過 XMLHttpRequest 的 sendAsBinary 方法將其發送出去。
[javascript]view plaincopy
var?xhr?=?new?XMLHttpRequest();??xhr.open("POST",?"url");??xhr.overrideMimeType('text/plain;?charset=x-user-defined-binary');??<pre?code_snippet_id="422893"?snippet_file_name="blog_20140709_4_2106578"?class="sh_javascript?sh_sourceCode"?name="code">xhr<span?class="sh_symbol">.</span><span?class="sh_function">sendAsBinary</span><span?class="sh_symbol">(</span>binaryString<span?class="sh_symbol">);</span></pre><br> ?大家分享一個FileInput的使用實例，也是自己開發中遇到的問題
如何使用FileInput
使用時的樣式
使用FileInput只需要將相關的js，css下載引用即可，相信當大家遇到這個問題的時候已經有了bootstrap開發的知識，這些基礎已經不成問題
選擇文件后的樣式，如果配置妥當的話，點擊上傳按鈕進度條將會讀滿并顯示Done
前臺代碼，這里有一個小小的問題 form表單的enctype屬性
表單中enctype="multipart/form-data"的意思，是設置表單的MIME編碼。默認情況，這個編碼格式是application/x-www-form-urlencoded，不能用于文件上傳；只有使用了multipart/form-data，才能完整的傳遞文件數據，進行下面的操作. 但是我們不需要配置，否則會出現form表單提交其他數據的問題
[html] view plain copy
接下來就說說如何配置相應的js
默認的fileinput.js應該有一個頁面加載完畢的動作，我們打開fileinput.js，果然有相應的方法。
[javascript] view plain copy
接下來將它注釋掉，我們自己寫初始化方法，在fileinput,js里添加initFileInput方法，并自己完成加載時的方法，文件上傳的一般邏輯應該是點擊文件上傳，將文件在后臺做相應的處理后將存儲的Url返回添加到form表單中，跟隨form表單一起提交到數據庫中。.on（）方法為fileInput上傳文件后的回調方法，之后對返回的數據處理即可。
[javascript] view plain copy
后臺處理的代碼，我直接將文件存在了本地并將路徑返回。
[java] view plain copy
到這里大家應該學會了fileinput的使用，如有問題請留言
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
