Web存儲及文件拖拽

時間 2019-11-20

標籤 web 存儲文件欄目 HTML 简体版

原文原文鏈接

存儲

實現內容的永久保存（localStorage）css

保存：html

localStorage.自定義鍵名="123";

獲取：緩存

1 //判斷是否有內容
2 if(localStorage.自定義鍵名){
3     //顯示內容
4     alert(localStorage.自定義鍵名);
5 }

只在當前頁面存儲（sessionStorage）session

保存和獲取方法與上相同app

緩存

CACHE MANIFEST在該標題下列出的文件將會在首次進行緩存spa

NETWORK 在該標題下的文件將不進行緩存code

FALLBACK在該標題下的文件將會在規定頁面沒法訪問時跳轉的其它頁面orm

開啓緩存：htm

在html標籤中添加屬性manifest,並指定值爲文件名對象

<html manifest="dongcache.appcache">

設置緩存：

建立dongcache.appcache文件

 1 CACHE MANIFEST
 2 
 3 CACHE:
 4 kk.html
 5 dong.css
 6 dong.js
 7 
 8 NETWORK:
 9 
10 FALLBACK:

文件拖拽

實現本地圖片拖拽並預覽

 1 var divobjx=document.getElementsByTagName("div")[0];
 2 //屏蔽系統默認事件
 3 divobjx.ondragover=function(e){
 4     e.preventDefault();
 5 }
 6 //監聽拖拽事件
 7 divobjx.ondrop=function(e){
 8     e.preventDefault();
 9     var f=e.dataTransfer.files[0];//獲得文件對象
10     alert(f.name+"***"+f.size+"***"+f.type);//獲得文件信息
11     var fr=new FileReader();
12     
13     fr.onload=function(e){
14         divobjx.innerHTML="<img src='"+fr.result+"'\>";
15         alert(fr.result);
16       }
17     fr.readAsDataURL(f);
18 }

表單文件內容獲取：

1 <input type="file" name="setfilex" />
2 <script>
3 var ffobjx=document.getElementsByName("setfilex")[0];    
4 ffobjx.onchange=function(){
5     f=ffobjx.files[0];
6     alert(f.name+"****"+f.size+"*****"+f.type);
7 }    
8 </script>

綜合代碼

文件上傳（選擇文件和拖拽文件）預覽和設置到form表單上

 1 var ffobjx=document.getElementsByName("setfilex")[0];//獲得文件表單對象    （input）
 2 //監聽文件表單的內容改變
 3 ffobjx.onchange=function(){
 4     f=ffobjx.files[0];
 5     showfile(f);
 6     //alert(f.name+"****"+f.size+"*****"+f.type);
 7 }
 8 var divobjx=document.getElementById("filediv");//獲得文件拖拽框對象
 9 //屏蔽系統默認事件
10 divobjx.ondragover=function(e){
11     e.preventDefault();
12 }
13 //監聽拖拽事件
14 divobjx.ondrop=function(e){
15     e.preventDefault();
16     var f=e.dataTransfer.files[0];//獲得文件對象
17     ffobjx.files=e.dataTransfer.files;//將拖拽信息設置到表單上    
18     showfile(fr);
19 }
20 //顯示文件，暫時設置爲顯示圖片
21 function showfile(f11){
22     //alert(f.name+"***"+f.size+"***"+f.type);//獲得文件信息
23     var fr=new FileReader();
24     fr.onload=function(e){
25         divobjx.innerHTML="<img id='fileimg' src='"+fr.result+"'\>";
26         //alert(fr.result);
27      }
28     fr.readAsDataURL(f11);
29 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。