Python學(xué)習(xí)筆記（11）Web頁面元素提取

eb頁面，一般是HTML頁面，是Internet組織信息的基礎(chǔ)元素。Web頁面元素提取是一類常見問題，在網(wǎng)絡(luò)爬蟲、瀏覽器等程序中有著不可或缺的重要作用。

HTML指超文本標(biāo)記語言，嚴(yán)格來說，HTML不是一種編程語言，而是一種對(duì)信息的標(biāo)記語言，對(duì)Web的內(nèi)容、格式進(jìn)行描述。

自動(dòng)地從一個(gè)鏈接獲取HTML頁面是簡單網(wǎng)絡(luò)爬蟲的功能，可以整體分成如下4個(gè)步驟：

步驟1: 讀取保存在本地的html文件；
步驟2：解析并提取其中的圖片鏈接；
步驟3：輸出提取結(jié)果到屏幕；
步驟4：保存提取結(jié)果為文件。

根據(jù)上述步驟，可以寫出主程序如下。其中設(shè)置了4個(gè)函數(shù)getHTMLlines()、extractImageUrls()、 showResults()和saveResults()分別對(duì)應(yīng)上述4個(gè)步驟。

getHTMLlines()：讀取保存在本地的html文件
extractImageUrls()：解析并提取其中的圖片鏈接
showResults()：輸出提取結(jié)果到屏幕
saveResults()：保存提取結(jié)果為文件

代碼：

def main(): 
 inputfile='nationalgeographic.html' 
 outputfile='nationalgeographic-urls.txt' 
 htmlLines=getHTMLlines(inputfile) 
 imageUrls=extractImageUrls(htmlLines) 
 showResults(imageUrls) 
 saveResults(outputfile, imageUrls)

定義main()函數(shù)的目的是為了讓代碼更加清晰，作為主程序，也可以不采用函數(shù)形式而直接編寫。 main()前兩行分別制定了擬獲取HTML文件的路徑和結(jié)果輸出路徑。

getHTMLlines()：讀取保存在本地的html文件

getHTMLlines()函數(shù)讀取HTML文件并內(nèi)容，并將結(jié)果轉(zhuǎn)換為一個(gè)分行列表，為了兼容不同編碼，建議在open()函數(shù)中增加encoding字段，設(shè)置采用UTF-8編碼打開文件。

def getHTMLlines(htmlpath): 
 f=open(htmlpath, "r", encoding='utf-8')
 ls=f.readlines() 
 f.close() 
 return ls

extractImageUrls()：解析并提取其中的圖片鏈接

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()：輸出提取結(jié)果到屏幕

showResults()函數(shù)將獲取的鏈接輸出到屏幕上，增加一個(gè)計(jì)數(shù)變量提供更好用戶體驗(yàn)。

def showResults(urls): 
 count=0 
 for url in urls: 
 print('第{:2}個(gè)URL:{}'.format(count, url)) 
 count +=1

saveResults()：保存結(jié)果到文件

言

在 HTML 文檔中 <input type="file"> 標(biāo)簽每出現(xiàn)一次，一個(gè) FileUpload 對(duì)象就會(huì)被創(chuàng)建。

該元素包含一個(gè)文本輸入字段，用來輸入文件名，還有一個(gè)按鈕，用來打開文件選擇對(duì)話框以便圖形化選擇文件。

該元素的 value 屬性保存了用戶指定的文件的名稱，但是當(dāng)包含一個(gè) file-upload 元素的表單被提交的時(shí)候，瀏覽器會(huì)向服務(wù)器發(fā)送選中的文件的內(nèi)容而不僅僅是發(fā)送文件名。

當(dāng)用戶選擇或編輯一個(gè)文件名，file-upload 元素觸發(fā) onchange 事件句柄。

看個(gè)簡單例子：

[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>??

這里讀取一個(gè)文件，顯示在div 中。

(在IE8 中無效， this.files 無法讀取文件。這個(gè)屬于HTML5 的特性)

當(dāng)選擇了一個(gè)文件時(shí)，就會(huì)把包含這個(gè)文件的列表（一個(gè)FileList對(duì)象）作為參數(shù)傳給handleFiles()函數(shù)了。這個(gè)FileList對(duì)象類似一個(gè)數(shù)組，可以知道文件的數(shù)目，而它的元素就是File對(duì)象了。從這個(gè)File對(duì)象可以獲取name、size、lastModifiedDate和type等屬性。把這個(gè)File對(duì)象傳給FileReader對(duì)象的讀取方法，就能讀取文件了。

HTML5 Drag and Drop File

Html5 支持的File 的操作不僅僅是文件的選擇，

在HTML5 之前需要使用 Applet 和 SilverLight 才能達(dá)到的文件拖拽功能，在HTML5 中也能輕松的實(shí)現(xiàn)，

看代碼：

[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>??

這里通過事件對(duì)象的 dataTransfer 可以得到文件。

讀取文件內(nèi)容

在第一個(gè)例子中，我們使用 FileReader類來讀取文件的內(nèi)容，

在 W3C 草案中，F(xiàn)ile 對(duì)象只包含文件名，文件類型等只讀屬性;FileReader用于內(nèi)容讀取和監(jiān)控讀取狀態(tài)。

（在firefox 中，可以直接使用 var fileBinary=file.getAsBinary(); 讀取文件的二進(jìn)制源碼）

FileReader提供的方法包括：

1. readAsBinaryString

2. readAsDataURL

3. readAsText

4. abort

.........

以下，舉一個(gè) 使用 FileReader 將用戶選擇的圖片不通過后臺(tái)即時(shí)顯示出來的例子。

[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 方法讀取到文件的二進(jìn)制碼，然后通過 XMLHttpRequest 的 sendAsBinary 方法將其發(fā)送出去。

[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> ?

大家分享一個(gè)FileInput的使用實(shí)例，也是自己開發(fā)中遇到的問題

如何使用FileInput

使用時(shí)的樣式

使用FileInput只需要將相關(guān)的js，css下載引用即可，相信當(dāng)大家遇到這個(gè)問題的時(shí)候已經(jīng)有了bootstrap開發(fā)的知識(shí)，這些基礎(chǔ)已經(jīng)不成問題

選擇文件后的樣式，如果配置妥當(dāng)?shù)脑挘c(diǎn)擊上傳按鈕進(jìn)度條將會(huì)讀滿并顯示Done

前臺(tái)代碼，這里有一個(gè)小小的問題 form表單的enctype屬性

表單中enctype="multipart/form-data"的意思，是設(shè)置表單的MIME編碼。默認(rèn)情況，這個(gè)編碼格式是application/x-www-form-urlencoded，不能用于文件上傳；只有使用了multipart/form-data，才能完整的傳遞文件數(shù)據(jù)，進(jìn)行下面的操作.
但是我們不需要配置，否則會(huì)出現(xiàn)form表單提交其他數(shù)據(jù)的問題

[html] view plain copy

<div class="line line-dashed line-lg pull-in"></div>
<div class="form-group">
<label class="col-sm-3 control-label">照片</label>
<div class="col-sm-9">
<input id="JSh_ZhP" type="file" class="file" name="file">
<input type="hidden" id="JSh_ZhP_Path" name="tbllecturer.JSh_ZhP"/>
<p class="help-block">支持jpg、jpeg、png、gif格式，大小不超過2.0M</p>
</div>

接下來就說說如何配置相應(yīng)的js

默認(rèn)的fileinput.js應(yīng)該有一個(gè)頁面加載完畢的動(dòng)作，我們打開fileinput.js，果然有相應(yīng)的方法。

[javascript] view plain copy

$(document).ready(function () {
var $input=$('input.file[type=file]');
if ($input.length) {
$input.fileinput();
}<span style="font-family:Arial, Helvetica, sans-serif;"> });</span>

接下來將它注釋掉，我們自己寫初始化方法，在fileinput,js里添加initFileInput方法，并自己完成加載時(shí)的方法，文件上傳的一般邏輯應(yīng)該是點(diǎn)擊文件上傳，將文件在后臺(tái)做相應(yīng)的處理后將存儲(chǔ)的Url返回添加到form表單中，跟隨form表單一起提交到數(shù)據(jù)庫中。.on（）方法為fileInput上傳文件后的回調(diào)方法，之后對(duì)返回的數(shù)據(jù)處理即可。

[javascript] view plain copy

function initFileInput(ctrlName,uploadUrl) {
var control=$('#' + ctrlName);
control.fileinput({
language: 'zh', //設(shè)置語言
uploadUrl: uploadUrl,
showUpload: true, //是否顯示上傳按鈕
showRemove:true,
showPreview : true,
dropZoneEnabled: false,
showCaption: true,//是否顯示標(biāo)題
allowedPreviewTypes: ['image'],
allowedFileTypes: ['image'],
allowedFileExtensions: ['jpg', 'png', 'gif'],
maxFileSize : 2000,
maxFileCount: 1,
//initialPreview: [
//預(yù)覽圖片的設(shè)置
// "<img src='http://127.0.0.1:8080/NewsManageSys/plugin/umeditor1_2_2/jsp/upload/20161030/55061 477813913474.jpg' class='file-preview-image' alt='肖像圖片' title='肖像圖片'>",
//],
}) }
$(document).ready(function () {
var path=rootPath + "/lecturer/picture/upLoad.shtml";
initFileInput("JSh_ZhP",path);
$("#JSh_ZhP").on("fileuploaded", function (event, data, previewId, index) {
$("#JSh_ZhP_Path").val(data.response);
});
});