html5讀取本地文件示例代碼
發(fā)布時間：2014-04-22 15:40:51 作者：佚名 
我要評論
我要評論這篇文章主要介紹了html5讀取本地文件的具體實現(xiàn)，html結(jié)構(gòu)樣式、Css樣式及js代碼如下，需要的朋友可以看看哦
html結(jié)構(gòu)樣式如下：
<div class="addpic">
<button>添加圖片</button>
<form>
<input id="logoimg" class="addlogo" type="file" multiple accept="image/*" name="logo">
</form>
</div>
<img id="showlogo" src="" alt="">
從樣式上說應(yīng)不顯示input元素的輸入框，這時需將input設(shè)置為透明樣式，然后將其覆蓋到button元素上方，這時方可實現(xiàn)點擊button上傳圖片。將accepted設(shè)置為“image/*”，則只允許圖片類文件上傳。
Css樣式如下
.addpic{
position:relative;
margin-left:100px;
width:95px;
height:30px;
}
.addlogo {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
cursor: pointer;
font-size: 30px;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
js代碼
function readFiles(evt){
var files=evt.target.files;
if(!files){
console.log("the file is invaild");
return;
}
for(var i=0, file; file=files[i]; i++){
var imgele=new Image();
var thesrc=window.URL.createObjectURL(file);
imgele.src=thesrc;
imgele.onload=function(){
$("#showlogo").attr("src",this.src);
}
}
}
$(document).ready(function(){
$("#logoimg").change(function(e){
readFiles(e)
});
});
復(fù)制代碼
代碼如下:<div class="addpic">
<button>添加圖片</button>
<form>
<input id="logoimg" class="addlogo" type="file" multiple accept="image/*" name="logo">
</form>
</div>
<img id="showlogo" src="" alt="">
從樣式上說應(yīng)不顯示input元素的輸入框，這時需將input設(shè)置為透明樣式，然后將其覆蓋到button元素上方，這時方可實現(xiàn)點擊button上傳圖片。將accepted設(shè)置為“image/*”，則只允許圖片類文件上傳。
Css樣式如下
復(fù)制代碼
代碼如下:.addpic{
position:relative;
margin-left:100px;
width:95px;
height:30px;
}
.addlogo {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
cursor: pointer;
font-size: 30px;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
js代碼
復(fù)制代碼
代碼如下:function readFiles(evt){
var files=evt.target.files;
if(!files){
console.log("the file is invaild");
return;
}
for(var i=0, file; file=files[i]; i++){
var imgele=new Image();
var thesrc=window.URL.createObjectURL(file);
imgele.src=thesrc;
imgele.onload=function(){
$("#showlogo").attr("src",this.src);
}
}
}
復(fù)制代碼
代碼如下:$(document).ready(function(){
$("#logoimg").change(function(e){
readFiles(e)
});
});
相關(guān)文章
- IndexedDB 是一種低級API，用于客戶端存儲大量結(jié)構(gòu)化數(shù)據(jù)(包括, 文件/ blobs)。下面通過本文重點給大家介紹HTML5本地存儲之IndexedDB的相關(guān)知識，感興趣的朋友一起看看吧2017-06-16
html5中l(wèi)ocalStorage本地存儲的簡單使用
我們在做頁面時會用到本地存儲的時候，今天說說localStorage本地存儲。感興趣的朋友一起學(xué)習(xí)吧2017-06-16- html5的兩種存儲技術(shù)的最大區(qū)別就是生命周期，接下來通過本文給大家分享HTML5 LocalStorage 本地存儲刷新值還在問題以及使用方法小結(jié)，需要的的朋友參考下本文吧2017-03-10
- 本篇文章主要介紹了HTML5 LocalStorage 本地存儲 ，HTML5 storage提供了一種方式讓網(wǎng)站能夠把信息存儲到你本地的計算機上，并再以后需要的時候進(jìn)行獲取。有興趣的可以了解2016-12-23
- 這篇文章主要介紹了html5本地存儲 localStorage操作使用詳解的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-20
- 這篇文章主要介紹了Html5 web本地存儲實例詳解的相關(guān)資料,需要的朋友可以參考下2016-07-28
深入剖析webstorage[html5的本地數(shù)據(jù)處理]
下面小編就為大家?guī)硪黄钊肫饰鰓ebstorage[html5的本地數(shù)據(jù)處理]。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-07-11- 這篇文章主要為大家詳細(xì)介紹了HTML5本地存儲之Web Storage的相關(guān)資料，Web Storage如何用JSON存儲多個數(shù)據(jù)，感興趣的小伙伴們可以參考一下2016-07-04
- 下面小編就為大家?guī)硪黄狧TML5 本地存儲 LocalStorage詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-24
HTML5本地數(shù)據(jù)庫基礎(chǔ)操作詳解
在本地數(shù)據(jù)庫中我們可以直接利用JavaScript創(chuàng)建數(shù)據(jù)庫，并利用SQL語句執(zhí)行相關(guān)的數(shù)據(jù)庫操作。對于復(fù)雜的數(shù)據(jù)庫，HTML5使用本地數(shù)據(jù)庫進(jìn)行操作,需要的朋友可以參考下2016-04-26