整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前端項目開發的時候，系統支持文件下載是前端開發中常用到的功能之一，當用戶訪問我們的網站時發現有自己需要的資源時可以將資源下載下來。文件下載主要有兩種形式，一種是通過文件地址下載，該文件可以存放在前端或者后端。另一種則是通過文件流下載，前端通過發送請求給后端并獲取后端文件流進行下載。
download屬性：是HTML5中的a標簽的新特性，用來規定被下載的超鏈接目標。在a標簽中如果沒有申明download屬性的時a標簽的默會鏈接跳轉進行預覽（如txt , jpg , pdf ），當前瀏覽器不支持預覽的文件時則出現下載。當申明了download屬性之后瀏覽器會對href屬性鏈接的文件進行下載。download屬性與不支持H5的低版本瀏覽器不兼容且僅限于同源文件，如果是非同源download屬性會失效。比如引用第三方的網站內容、引用前后端分離的服務器內容、甚至本地測試引用的本地文件，download都會不起作用。如果你想測試該功能可以在本地開一個服務，將文件放同一服務中測試就可以了。
直接使用a標簽時只要在a標簽中添加download屬性，如果是非a標簽的話可以在出發事件的時候通過JavaScript來創建一個隱藏a標簽下載，當我們點擊時觸發隱藏的a標簽下載事件。這里使用appendChild和removeChild的處理是為了兼容Firefox瀏覽器。
需要了解XMLHttpRequest可以參考文章：JavaScript實戰001：XMLHttpRequest使用入門，這里我利用XMLHttpRequest對象來發送請求，用blob類型來接受后臺發過來的二進制類型文件。然后模擬a標簽創建隱藏的下載鏈接，通過URL.createObjectURL()方法創建一個指向blob對象的URL地址。
iframe是HTML標簽元素，可以用來創建內聯框架。iframe提供了src屬性用來規定在 iframe 中顯示的文檔的 URL，我們可以直接將文件地址拋給iframe，也可以賦值文件流地址給iframe。功能實現跟a標簽有點相似，創建一個隱藏的iframe標簽來實現文件的下載功能。使用文件地址下載需要注意的是瀏覽器支持預覽的文件類型無法下載（比如圖片、PDF文檔、text文本等會直接打開文件預覽），文件流下載只需將請求接口賦給src屬性，iframe會自動去請求該文件實現下載。
window.open()方法用于打開一個新的瀏覽器窗口或查找一個已命名的窗口，也可以用它來實現文件下載功能。而且這個比iframe更簡單，直接將文件地址或者請求接口賦給window.open(url)方法即可實現文件下載功能。但是有個缺點就是每次下載都會打開一個新的窗口來實現下載（想不跳轉可以嘗試window.location.assign()方法，用于加載一個新的文檔），而且如果使用文件地址下載的是瀏覽器支持預覽的文件類型無法下載（比如圖片、PDF文檔、text文本等會直接打開文件預覽）。
form表單是個比較常用的html表簽，用戶提交用戶信息，比如常見的登錄、注冊界面大部分都是通過form表單進行數據提交的。form表單所有要提交的數據都必須放在form標簽中，method屬性定義提交的方法（有get和post兩種提交方法），action屬性定義請求的地址。form標簽中支持input、menus、textarea、fieldset、legend 和 label 等元素，通過submit向服務器提交數據。這里我創建了form表單和input框，input用于輸入請求的參數，form用于提交數據請求。
這里提供下Django的后臺文件請求接口，以上文件請求都是基于該接口實現的。接收請求方法為GET，請求參數為id（數據庫存儲的文件id），采用FileResponse方式返回的文件流信息（具體實現功能可以參考文章：Django實戰013：各種文件下載功能實現詳解）。
下載的方式方法有很多，以上只是JavaScript中常見的幾種下載方式。其實用ajax或者axios也可以實現下載，但是萬變不離其中，會JavaScript下載害怕不會別的么。以上下載方式個人覺得還是iframe比較簡單方便，請求最好還是通過文件流來實現，相對文件地址下載會更安全些。
更多前端技巧可以參考專欄：Vue實戰技巧
ileReader 對象FileReader 對象主要用來把文件讀入內存，并且讀取文件中的數據。通過構造函數創建一個 FileReader 對象。
這個文件讀取對象有以下幾種方法：
1.readAsText():讀取文本文件(可以使用Txt打開的文件)，返回文本字符串，默認編碼是UTF-8。
2.readAsBinaryString():讀取任意類型的文件。返回二進制字符串。這個方法不是用來讀取文件展示給用戶看，而是存儲文件。例如：讀取文件的內容，獲取二進制數據，傳遞給后臺，后臺接收了數據之后，再將數據存儲。
3.readAsDataURL():讀取文件獲取一段以data開頭的字符串，這段字符串的本質就是DataURL.DataURL是一種將文件(這個文件一般就是指圖像或者能夠嵌入到文檔的文件格式)嵌入到文檔的方案。DataURL是將資源轉換為base64編碼的字符串形式，并且將這些內容直接存儲在url中>>優化網站的加載速度和執行效率。
4.abort():中斷讀取
該對象常見應用在即時預覽：
即時：當用戶選擇完圖片之后就立刻進行預覽的處理 >>onchange。
預覽：通過文件讀取對象的readAsDataURL()完成。
以下是應用時的具體實現（推薦了解黑馬程序員web前端培訓課程）
HTML部分：
JS部分：
其中獲取數據時，FileReader還提供一個完整的事件模型，用來捕獲讀取文件時的狀態。
onabort:讀取文件中斷片時觸發
onerror:讀取錯誤時觸發
onload:文件讀取成功完成時觸發
onloadend:讀取完成時觸發，無論成功還是失敗
onloadstart:開始讀取時觸發
onprogress:讀取文件過程中持續觸發
.應用程序標簽
DataList(數據列表)
Progress(進度條)
Meter(數值顯示器) 示例:
<html lang="en"><head> <meta charset="UTF-8"> <title>應用程序標簽</title> <style> .my-progress{ -webkit-appearance: none; } </style></head><body><!--數據列表，呈現需要載體--><input type="text" list="data-list"><datalist id="data-list"> <option value="張三"></option> <option value="李四"></option></datalist><!--進度條--><progress></progress><!--progress默認最大值是1，可以設定自己想要的值--><progress class="my-progress" value="30" max="100"></progress><meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter></body>可以利用數據列表（data-list）做一個那種帶下拉框的輸入框，可以根據用戶輸入的內容匹配下拉框的內容（select2也可以實現這種需求，而且最低可以兼容到IE8，推薦用select2）,后面的progress和meter樣式不好控制，用的不太多。
2.自定義屬性（data-*）
在html5中可以自定義數據，以data開頭，利用這個自定義標簽我們可以把屬性暫時存儲到頁面中，在js中可以使用，例子如下：
<html lang="en"><head> <meta charset="UTF-8"> <title>data屬性</title></head><body> <ul id="list"> </ul></body><script> // 鍵是ID 值是信息 var data={ 01: { name: "張三1", age: 18 }, 02: { name: "張三2", age: 19 }, 03: { name: "張三3", age: 20 } }; var list=document.getElementById("list"); for(var id in data){ var item=data[id]; var liem=document.createElement("li"); liem.innerHTML=item.name; //自定義data-*屬性 liem.setAttribute("data-name",item.name); liem.setAttribute("data-age",item.age); list.appendChild(liem); //點擊獲取dataset屬性 liem.addEventListener("click",function(){ //下面這兩種方式均可以，都不帶data- alert(this.dataset['name']); alert(this.dataset.name); }) }</script>下面這篇文章總結的很好，可以參考：http://blog.csdn.net/qq_31851435/article/details/53100691
3.新的表單提交方式
傳統的一共有9中表單提交方式，html5新增了幾種，目前只用在移動端，pc端兼容性有問題，而且在輸入的時候并沒有進行驗證，比如類型是email的，并沒有校驗郵箱格式，還是需要我們自己手動寫正則表達式驗證的，只是在手機端當喚起輸入法的時候會自動切換到英文輸入法。
<head> <meta charset="UTF-8"> <title>新的表單提交方式</title></head><body><h3>傳統的表單提交方式（9種）</h3>用戶名：<input type="text"> <br>密碼：<input type="password"><br>性別：<input type="radio"><br>課程:<input type="checkbox"><br>隱藏：<input type="hidden">文件：<input type="file"><br>按鈕：<input type="button" value="按鈕"><br>表單:<input type="submit"><br>重置：<input type="reset"><br><hr><h3>新的表單提交方式（目前只用在移動端）</h3>顏色：<input type="color"><br>網址：<input type="url"><br>搜索：<input type="search" results="10" placeholder="Search..."><br>郵箱：<input type="email" pattern="^\*.com"><br>日期：<input type="date" min="2015-09-01" max="2018-09-01"><br>圖片：<input type="image"><br>范圍：<input type="range" min="0" max="50" value="10"><br>數字：<input type="number"></body>
4.新的選擇器
html5提供新的選擇器，querySelector選擇單個的元素，返回滿足條件的第一個元素，是一個dom元素，querySelectorAll選擇全部的元素，返回滿足條件的全部元素，是一個dom數組，里面可以是id，標簽或class類。
<html lang="en"><head> <meta charset="UTF-8"> <title>新選擇器</title></head><body><h3>新選擇器</h3><ul> <li class="item">item1</li> <li class="item">item2</li> <li class="item">item3</li> <li class="item">item4</li> <li class="item">item5</li> <li class="item">item6</li> <li class="item">item7</li> <li class="item">item8</li> <li class="item">item9</li> <li class="item">item10</li></ul></body><script> //匿名函數，可以將作用域分隔開 (function(){ var liem=document.querySelector(".item"); //只選擇第一個 console.log(liem.innerHTML); var lis=document.querySelectorAll("ul>li"); //選擇全部 for(var i=0;i<lis.length;i++){ console.log(lis[i]); lis[i].addEventListener("click",function(){ debugger; //可以調試代碼。類似于瀏覽器打斷點 console.log(this.innerHTML); }) } })()</script>5.元素類列表（Element.classList）
新H5中DOM對象多了一個classList屬性，是一個數組:
add 添加一個新的類名
remove 刪除一個類名
contains 判斷是否包含一個指定的類名
toggle 切換一個類名。 element.toggle('class-name',[addorremove])，第一個參數是類名，第二個參數是布爾值，如果是true，則添加類名，如果是false,則去掉類名。示例：
<head> <meta charset="UTF-8"> <title>元素類列表</title> <link rel="stylesheet" href="css/bootstrap.css"></head><body><div class="container"> <div class="collapse navbar-collapse"> <nav class="navbar navbar-default"> <a class="navbar-brand" href="#">Brand</a> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav> </div></div><script> //匿名函數 (function(){ /** 點擊時添加和刪除類名**/ var lis=document.querySelectorAll(".nav li"); for(var i=0;i<lis.length;i++){ lis[i].addEventListener("click",function(e){ //去掉原先所有的樣式 for(var j=0;j<lis.length;j++){ lis[j].classList.remove("active"); } //添加點擊樣式 this.classList.add("active"); e.preventDefault(); //取消事件的默認操作 }) } /** 點擊時存在類名則刪除，不存在類名則添加**/ var elem=document.querySelector(".navbar-brand"); //點擊時如果存在active這個屬性則去掉，如果不存在這個屬性則加上 elem.addEventListener("click",function(e){ //判斷是否包含active這個類名 var isExist=elem.classList.contains("active"); this.classList.toggle("active",!isExist); e.preventDefault(); }) })()</script></body>6.訪問歷史Api
在HTML5中可以通過window.history操作訪問歷史狀態，讓一個頁面可以有多個歷史狀態
window.history.forward(); // 前進
window.history.back(); // 后退
window.history.go(); // 刷新
history.pushState(放入歷史中的狀態數據, 設置title(現在瀏覽器不支持)， 改變歷史狀態)，通過JS可以加入一個訪問狀態
<head> <meta charset="UTF-8"> <title>歷史記錄</title></head><body><input type="button" value="測試歷史記錄" onclick="addHistory()"></body><script> //添加歷史記錄 function addHistory(){ //判斷瀏覽器是否支持歷史記錄，畢竟是h5的新特性，低版本瀏覽器不支持 if(window.history && history.pushState){ //支持 history.pushState(new Date().toLocaleDateString(),"設置歷史記錄的標簽，但是目前瀏覽器還不支持","?demo="+new Date().toLocaleTimeString()); }else{ console.log("抱歉，瀏覽器不支持歷史記錄") } } //下面這個事件是點擊瀏覽器中的前進或后退時觸發 window.addEventListener("popstate",function(e){ console.log("點擊了歷史按鈕"+e.state); })</script>7.全屏Api
H5中可以用requestFullScreen()方法實現指定元素的全屏顯示（類似于瀏覽器中按F11）。首先需要獲取需要全屏顯示的元素，然后判斷瀏覽器是屬于谷歌內核還是火狐內核或者其它瀏覽器，然后調用響應方法即可。(注意：目前這個特性瀏覽器兼容性還比較差，谷歌和火狐可以)
var elem=需要全屏的元素;if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen();} else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen();} else if (elem.requestFullScreen){ elem.requestFullScreen();}<head> <meta charset="UTF-8"> <title>全屏顯示</title></head><body><h3 style="cursor: pointer">點我全屏顯示</h3><p>測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示 測試全屏顯示測試全屏顯示測試<br> 全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示</p><script> //匿名函數 (function () { //獲取事件源和要全屏顯示的元素 var elem=document.querySelector("p"); document.querySelector("h3").addEventListener("click",function(e){ //判斷瀏覽器是否支持全屏顯示 if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.requestFullScreen){ elem.requestFullScreen(); }else{ console.log("瀏覽器不支持全屏顯示") } }); })()</script></body>8.Application Cache離線訪問技術
在H5中可以利用Application Cache實現離線訪問技術，測試時可以通過谷歌瀏覽器——NetWork——No throttling(Disable cache后面的那個下拉框)——下拉選擇Offline(模擬未聯網的情形)。示例如下：
html代碼：<html lang="en" manifest="cache.manifest"><head> <meta charset="UTF-8"> <title>離線訪問</title> <link rel="stylesheet" href="style.css"></head><body><p>這是html頁面中的內容</p><script src="script.js"></script></body>style.css文件代碼body::before{ content: "這是Css中引入的內容"; font-size: 40px;}script.js文件代碼：document.write("這是js中引入的內容")cache.manifest文件代碼：CACHE MANIFEST# version 1.0.1CACHE: 08離線訪問.html script.js style.cssNETWORK: *解釋：在html代碼中通過css的偽類和js的document.write函數分別輸出兩句話，模擬請求其它文件，然后在manifest（緩存清單）中定義了一個cache.manifest的緩存清單文件，文件里首先定義了當前軟件的版本，下面的CACHE，代表斷網情況下，從下面定義的文件中讀取文件，NETWORK代表聯網時候要讀取的文件，星號代表全部。即斷網時從我定義的文件中讀取文件，聯網時，讀取全部文件，這樣便可實現離線訪問。
9.web網頁存儲
h5中提供sessionStorage和localStorage兩種數據存儲方式，前者存儲的內容只在本次會話中存儲，瀏覽器關閉數據消失，后者是可以永久存儲在瀏覽器中，除非手動或通過程序刪除。這兩種存儲方式比cookie存儲的數據量大，而且可以存儲對象數據（cookie只能存儲字符串數據）。
<head> <meta charset="UTF-8"> <title>網頁存儲</title></head><body><textarea rows="5" cols="30" id="txt-data"></textarea><input type="button" value="設置數據" id="set-data"><input type="button" value="獲取數據" id="get-data"><script> (function(){ var txtValue=document.querySelector("#txt-data"); console.log(txtValue.value); //設置數據 document.querySelector("#set-data").addEventListener("click",function (e) { //判斷是否支持存儲 if(window.sessionStorage){ sessionStorage.setItem("key",txtValue.value); }else{ console.log("還在用渣渣IE嗎？升級吧。。。") } }) //獲取數據 document.querySelector("#get-data").addEventListener("click",function (e) { //判斷是否支持存儲 if(window.sessionStorage){ txtValue.value=sessionStorage.getItem("key"); }else{ console.log("還在用渣渣IE嗎？升級吧。。。") } }) })()</script></body>10.操作文件Api
通過file表單選擇文件，之后利用h5提供的文件api可以獲取文件名，大小，類型，最后修改時間等文件信息。
<html lang="en"><head> <meta charset="UTF-8"> <title>操作文件</title> <link rel="stylesheet" href="css/bootstrap.css"></head><body> <div class="container"> <form> <input type="file" class="form-control hidden" id="btn_file" multiple> <input type="button" value="選擇文件" class="btn btn-success" id="btn_select"> <div class="list-group" id="ul_list"> <!--待追加數據位置--> </div> </form> </div></body><script> (function(){ var btn_file=document.querySelector("#btn_file"); var btn_select=document.querySelector("#btn_select"); var ul_list=document.querySelector("#ul_list"); //利用“hidden”類將文件輸入框隱藏，當點擊“選擇文件按鈕時”，調用選擇文件按鈕，選擇文件， // 因為input type="file"這個無法修改樣式，把它隱藏，點擊其它按鈕時，在其它按鈕中調用點擊上傳文件 btn_select.addEventListener("click",function(){ btn_file.click(); }) //選擇文件完成后（即文件內容發生改變后） btn_file.addEventListener("change",function(e){ var files=btn_file.files; //獲取所有文件，并遍歷 for(var i=0;i<files.length;i++){ console.log(files[i]); var liem=document.createElement("li"); liem.setAttribute("class","list-group-item"); liem.innerHTML=' <h4 class="list-group-item-heading">'+files[i].name+'</h4>'+ '<p class="list-group-item-text">'+files[i].lastModifiedDate.toLocaleTimeString()+' '+(files[i].size/1024).toFixed(2)+'kb</p>' ul_list.appendChild(liem); } }) })()</script>這里是用到了bootstrap的樣式，因為file表單比較丑，而且無法改變樣式，所以我們可以把文件表單隱藏（用hidden隱藏樣式），提供一個按鈕，當點擊這個按鈕時去雕砌選文件的彈框，multiple屬性支持一次選擇多個文件。
11.拖拽文件
拖拽文件時需要依次注冊以下事件：
dragenter 注冊拖拽進入事件
dragleave 注冊拖拽離開事件
dragover 注冊滑動事件（在這里面阻止默認事件）
drop 注冊松手落地事件。 在拖動松手落地事件中判斷拖進來的是文件還是圖片地址還是文字，分別進行處理。e.dataTransfer獲取拖動進來的信息。
<head> <meta charset="UTF-8"> <title>拖拽文件</title> <link rel="stylesheet" href="css/bootstrap.css"> <style> #target{ height: 200px; border: 5px dashed #c0c0c0; color: #505050; padding: 20px; font-size: 40px; cursor: pointer; text-align: center; -webkit-user-select: none; } #target.actived{ border-color: #888; color: #080808; box-shadow: 0 0 80px #e0e0e0 inset; } </style></head><body><div class="container"> <div class="page-header"> <h3>拖拽文件</h3> </div> <div class="jumbotron"> <p>我們這里測試拖拽文件</p> <img src="test.png"> </div> <div id="target"> 拖拽文件進來 <ul id="result" class="list-group"></ul> </div></div></body><script> (function(){ var target=document.querySelector("#target"); var fileList=document.querySelector('#result'); //注冊拖拽進入事件 target.addEventListener("dragenter",function(){ this.classList.add("actived"); //添加樣式 }) //注冊拖拽文件離開事件 target.addEventListener("dragleave",function(){ this.classList.remove("actived"); //添加樣式 }) //注冊落地事件之前必須要先阻止默認事件，這里在滑動里面阻止默認事件 target.addEventListener("dragover",function(e){ e.preventDefault(); //阻止默認事件 e.stopPropagation(); }) //注冊松手落地事件 target.addEventListener("drop",function(e){ //判斷拖入進來的是文件，圖片還是文字，分別處理 if(e.dataTransfer.files.length){ //拖入的是文件 var files=e.dataTransfer.files; for (var i=0; i < files.length; i++) { var li=document.createElement('li'); li.setAttribute('class', 'list-group-item'); // 創建信息的子節點 li.innerHTML='<h5 class="list-group-item-heading">' + files[i].name + '</h5><p class="list-group-item-text">' + files[i].lastModifiedDate.toLocaleDateString() + ' ' + files[i].lastModifiedDate.toLocaleTimeString() + ' ' + (files[i].size / 1024).toFixed(2) + 'KB</p>'; fileList.appendChild(li); } }else{ //不是文件 var data=e.dataTransfer.getData('text/plain'); //判斷拖入的是文本還是圖片 if(data){ //拖入的是文本,直接置換 target.innerHTML=data; }else{ //拖入的是圖片 var imgElem=document.createElement("img"); imgElem.src=data; target.appendChild(imgElem); } } }) })()</script>12.訪問設備信息
h5提供了許多可以訪問設備的Api，但是目前基本都應用在手機端，pc端使用非常有限。
獲取網絡狀態。
// × 所有PC瀏覽器現在都不支持 只有手機端的Firefoxvar connectionInfo=navigator.connection;或者下面這個方法：if (navigator.onLine){ console.log('online');}else{ console.log('offline');}獲取重力感應方向
window.addEventListener('deviceorientation', function(event) { var a=event.alpha; // Y軸 上下方向 var b=event.beta; // Z軸 東西方向 var g=event.gamma; // X軸 南北方向});加速度計
window.addEventListener('devicemotion', function(e) { // 獲取加速計數據 {x,y,z} var acceleration=e.accelerationIncludingGravity;});地理坐標
navigator.geolocation.getCurrentPosition(function(e) { // e.coords.longitude : 經度, e.coords.latitude : 緯度 document.querySelector('#result').innerHTML=JSON.stringify(e.coords);}, function(e) { document.querySelector('#result').innerHTML=JSON.stringify(e);});navigator.geolocation.watchPosition(success, error);H5還有其它的一些特性，包括語義化標簽，ARIA無障礙互聯網應用，多媒體（包括音頻，視頻）等等，真正使用的時候再詳細研究。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
