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