JavaScript通過filereader接口讀取文件

更新時(shí)間：2017年05月10日 11:19:22 作者：三明自

這篇文章主要為大家詳細(xì)介紹了通過filereader接口讀取文件，使用readAsDataURL方法預(yù)覽圖片的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

使用FileReader接口的readAsDataURL方法實(shí)現(xiàn)圖片的預(yù)覽。

源代碼：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>通過filereader接口讀取文件</title> 
<script type="text/javascript"> 
function readAsDataURL() 
{ 
  if(typeof FileReader=='undifined') //判斷瀏覽器是否支持filereader 
  { 
    result.innerHTML="<p>抱歉，你的瀏覽器不支持 FileReader</p>"; 
    return false; 
  } 
  var file=document.getElementById("imagefile").files[0]; 
  if(!/image\/\w+/.test(file.type)) //判斷獲取的是否為圖片文件 
  { 
    alert("請確保文件為圖像文件"); 
    return false; 
  } 
  var reader=new FileReader(); 
  reader.readAsDataURL(file); 
  reader.onload=function(e) 
  { 
    var result=document.getElementById("result"); 
    result.innerHTML='<img src="'+this.result+'" alt=""/>' 
  } 
   
} 
</script> 
</head> 
 
<body> 
<p> 
  <label>請選擇一個(gè)文件：</label> 
  <input type="file" id="imagefile" /> 
  <input type="button" value="讀取圖像" onClick="readAsDataURL();" /> 
</p> 
<div name="result" id="result"> 
  <!-- 這里用來顯示圖片結(jié)果--> 
</div> 
</body> 
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript insertAfter()定義與用法示例
這篇文章主要介紹了javascript insertAfter()定義與用法,實(shí)例分析了javascript節(jié)點(diǎn)后插入元素的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下
2016-07-07
JS簡單實(shí)現(xiàn)浮動(dòng)窗口效果示例
這篇文章主要介紹了JS簡單實(shí)現(xiàn)浮動(dòng)窗口效果,涉及javascript操作浮動(dòng)窗口的創(chuàng)建、打開、關(guān)閉等相關(guān)操作技巧,需要的朋友可以參考下
2016-09-09
PHP+jQuery+Ajax+Mysql如何實(shí)現(xiàn)發(fā)表心情功能
這篇文章通過php+jquery+ajax+mysql相結(jié)合，實(shí)現(xiàn)當(dāng)用戶瀏覽網(wǎng)站文章或者是論壇帖子后，想表達(dá)自己瀏覽后的心情，發(fā)表自己的感受，很多網(wǎng)站都提供了用戶發(fā)表心情的功能，通過此功能可以很直觀的分析文章或者是論壇對瀏覽者的用戶體驗(yàn)度
2015-08-08
js/jQuery對象互轉(zhuǎn)(快速操作dom元素)
在操作js或者jquery方面相關(guān)的元素時(shí)，可能會力不從心，因?yàn)樵谑褂梅椒〞r(shí)可能js的會更好一點(diǎn)又或者jquery的會更好一點(diǎn)，真是無從選擇啊,接下來將介紹JS/jQuery對象互轉(zhuǎn)實(shí)現(xiàn),方便你快速操作dom元素，感興趣的朋友可以了解下啊
2013-02-02
前端傳遞參數(shù)時(shí)form-data和json的區(qū)別詳解
前端可以通FormData對象實(shí)現(xiàn)表單形式提交數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于前端傳遞參數(shù)時(shí)form-data和json區(qū)別的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
googlemap 之 javascript實(shí)現(xiàn)方法
googlemap 之 javascript實(shí)現(xiàn)方法...
2007-01-01
圖解Sublime Text3使用技巧
通過本篇文章給大家介紹Sublime Text3使用技巧的相關(guān)知識，對sublime text3技巧相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
echarts數(shù)據(jù)可視化實(shí)現(xiàn)多個(gè)柱狀堆疊圖頂部顯示總數(shù)示例
這篇文章主要為大家介紹了echarts實(shí)現(xiàn)多個(gè)柱狀堆疊圖頂部顯示總數(shù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
Bootstrap中datetimepicker使用小結(jié)
這篇文章主要為大家詳細(xì)介紹了Bootstrap中datetimepicker的使用方法，一款功能強(qiáng)大的日期選擇控件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
layui table 表格上添加日期控件的兩種方法
今天小編就為大家分享一篇layui table 表格上添加日期控件的兩種方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09