JavaScript使用readAsDataUrl方法預覽圖片
更新時間：2017年05月10日 11:10:20 作者：liuhenghui5201
這篇文章主要為大家詳細介紹了JavaScript使用readAsDataUrl方法預覽圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了readAsDataUrl方法預覽圖片的具體代碼，供大家參考，具體內容如下
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function filePrevImg(files){
//檢測瀏覽器是否支持FileReader對象
if(typeof FileReader == "undefined"){
alert("您的瀏覽器不支持FileReader對象！");
}
var strHtml = "";
for(var intI=0;intI<files.length;intI++){
var tmpFile = files[intI];
var reader = new FileReader();//每循環(huán)一次都要重新new一個FileReader實例
reader.readAsDataURL(tmpFile);
reader.onload=function(e){
alert(e.target.result);
strHtml += "<img src='"+e.target.result+"' alt=''/>";
$$("prevUpload").innerHTML = "<li>"+strHtml+"</li>";
};
}
}
</script>
</head>
<body>
<fieldset>
<legend>使用readAsDataUrl()方法預覽圖片</legend>
<input type="file" name="fileUpload" id="fileUpload" onchange="filePrevImg(this.files);" multiple="true" />
<ul id="prevUpload"></ul>
</fieldset>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
前端技巧之HTTP中POST提交數(shù)據(jù)四種方式
這篇文章主要為大家介紹了前端技巧之HTTP中POST提交數(shù)據(jù)四種方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
3分鐘教你用JavaScript實現(xiàn)電子簽名效果
電子簽名已經(jīng)成為現(xiàn)代商業(yè)中不可或缺的一部分，它可以提高業(yè)務流程的效率和安全性。本文將介紹如何使用HTML5的canvas元素和JavaScript在前端實現(xiàn)電子簽名，需要的可以參考一下2023-04-04
微信小程序事件對象中e.target和e.currentTarget的區(qū)別詳解
這篇文章主要介紹了微信小程序事件對象中e.target和e.currentTarget的區(qū)別詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家詳細介紹了js禁止瀏覽器的回退事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要給大家介紹了關于javascript中數(shù)組的常用算法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用javascript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
在前端開發(fā)中,跨瀏覽器兼容性問題一直是個不容忽視的挑戰(zhàn),本文將從多個角度詳細解析跨瀏覽器兼容性問題的根源、常見問題以及解決方案,需要的可以參考下2025-03-03
簡單的無縫滾動程序-僅幾行代碼...2007-05-05
這篇文章主要介紹了在vue中為什么不能用index作為key，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
textarea焦點的用法實現(xiàn)獲取焦點清空失去焦點提示效果
這篇文章主要介紹了textarea焦點的用法實現(xiàn)獲取焦點清空失去焦點提示效果,需要的朋友可以參考下2014-05-05
在本篇內容里小編給大家整理了關于解決JS跨域請求的問題知識點，需要的朋友們參考學習下。2018-12-12