简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

JavaScript中如何透過filereader介面讀取檔案的程式碼案例

黄舟
發布： 2017-05-14 10:16:42
原創
1885 人瀏覽過

這篇文章主要為大家詳細介紹了透過filereader介面讀取檔案，使用readAsDataURL方法預覽圖片的相關方法，具有一定的參考價值，有興趣的小夥伴可以參考一下

使用FileReader介面的readAsDataURL方法實作圖片的預覽。

原始碼：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>通过filereader接口读取文件</title> 
<script type="text/javascript"> 
function readAsDataURL() 
{ 
  if(typeof FileReader==&#39;undifined&#39;) //判断浏览器是否支持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=&#39;<img src="&#39;+this.result+&#39;" alt=""/>&#39; 
  } 
   
} 
</script> 
</head> 
 
<body> 
<p> 
  <label>请选择一个文件：</label> 
  <input type="file" id="imagefile" /> 
  <input type="button" value="读取图像" onClick="readAsDataURL();" /> 
</p> 
<p name="result" id="result"> 
  <!-- 这里用来显示图片结果--> 
</p> 
</body> 
</html>
登入後複製

以上是JavaScript中如何透過filereader介面讀取檔案的程式碼案例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
JavaScript，filereader，读取文件
來源：php.cn
上一篇：JavaScript中readAsDataURL讀取映像檔的實作方法介紹 下一篇：js實作滑鼠拖曳功能
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
在網路應用程式中顯示版本資訊的最佳實踐是什麼？ 我正在開發一個網頁應用程式。在網路應用程式中顯示版本資訊的最佳實踐是什麼？我正在使用語義版本控制，並且我已經有了semver，例如1.2.0但我很好奇在哪裡顯示它的最佳方式以及如何...
來自於 2024-04-06 19:13:16
0
2
476
即使 consolelog 具有正確的值，PHP AJAX 也不會動態更新 我正在嘗試透過點擊按鈕來更新$_POST['category']。我正在嘗試使用AJAX（第一次）來實現此目的，如在此處的多個其他頁面上閱讀的那樣。我的JS函數目前在控制台中更新了...
來自於 2024-04-02 17:50:59
0
1
396
無需後端伺服器即可使用 Javascript 登入 如何在沒有後端伺服器的情況下取得和發送資料？我承擔了一個使用JavaScript建立登入的專案。創建我自己的JSON檔案有意義嗎？使用localstorage將資料儲存在哪裡？
來自於 2024-04-01 09:43:17
0
1
336
'閱讀器關閉時嘗試閱讀無效。” 我正在嘗試將來自mysqluinlgc#的資料寫入.txt文件，但出現錯誤「閱讀器關閉時嘗試讀取無效。」。程式碼在這裡：StreamWritersr_Produto=newStre...
來自於 2024-03-31 14:58:58
0
1
273
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！