JS使用H5實現(xiàn)圖片預(yù)覽功能
更新時間：2019年09月30日 14:02:49 作者：feri
這篇文章主要為大家詳細(xì)介紹了JS使用H5實現(xiàn)圖片預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
JS使用H5實現(xiàn)上傳圖片預(yù)覽的功能，以下是代碼的實現(xiàn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上傳預(yù)覽</title>
<script type="text/javascript">
//預(yù)覽圖片,參數(shù)說明：第一個參數(shù)：要預(yù)覽的file對象，第二個參數(shù)：預(yù)覽的img標(biāo)簽的id名稱
function yl(obj,id) {
//FileReader
if(window.FileReader){//驗證當(dāng)前的瀏覽器是否支持圖片預(yù)覽
var reader=new FileReader();
var file=obj.files[0];
var regexImage=/^image\//;//js正則表達式，匹配是否擁有image
if(regexImage.test(file.type)){
//設(shè)置讀取結(jié)束的回調(diào)函數(shù)
reader.οnlοad=function(data){
var img=document.getElementById(id);
img.src=data.target.result;//將結(jié)果數(shù)據(jù)顯示到img標(biāo)簽上
};
//開始讀取上傳的文件內(nèi)容
reader.readAsDataURL(file);
}else{
alert("親，看清楚是圖片預(yù)覽");
return;
}
}else{
alert("親，瀏覽器該升級了");
return;
}
}
</script>
</head>
<body>
<form action="fileup" method="post" enctype="multipart/form-data">
<input type="file" name="f1" onchange="yl(this,'ylimg')"/>
<img alt="圖片預(yù)覽" id="ylimg" width="400px" height="400px"/>
<input type="submit" value="上傳圖片"/>
</form>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文針對目前常見的面試題，僅提供了相應(yīng)的核心原理及思路，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-07-07
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)驗證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
JavaScript開發(fā)人員的10個關(guān)鍵習(xí)慣小結(jié)
還在一味沒有目的的編寫JavaScript代碼嗎？那么你就OUT了！讓我們一起來看看小編為大家搜羅的JavaScript開發(fā)人員應(yīng)該具備的十大關(guān)鍵習(xí)慣吧2014-12-12
全面解析JavaScript中apply和call以及bind(推薦)
在javascript中apply、call和bind是三兄弟，很好的搭檔，下面小編給大家全面解析JavaScript中apply和call以及bind的相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
慕課網(wǎng)題目之js實現(xiàn)抽獎系統(tǒng)功能
這篇文章主要為大家詳細(xì)介紹了慕課網(wǎng)題目之js抽獎系統(tǒng)功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
gulpjs是一個前端構(gòu)建工具，與gruntjs相比，gulpjs無需寫一大堆繁雜的配置參數(shù)，API也非常簡單，學(xué)習(xí)起來很容易，下面這篇文章主要給大家介紹了關(guān)于前端構(gòu)建工具之gulp的配置與搭建的相關(guān)資料，需要的朋友可以參考下。2017-06-06
用javascript實現(xiàn)記錄來賓姓名的代碼...2007-03-03
javascript設(shè)計模式 – 組合模式原理與應(yīng)用實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 組合模式,結(jié)合實例形式分析了javascript組合模式相關(guān)概念、原理、應(yīng)用場景及相關(guān)使用注意事項,需要的朋友可以參考下2020-04-04
JavaScript函數(shù)定義的常見注意事項小結(jié)
這篇文章主要介紹了JavaScript函數(shù)定義的常見注意事項,包含了常見的錯誤及注意事項,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了JavaScript三種獲取URL參數(shù)值的方法，文章圍繞主題展開詳細(xì)的內(nèi)容戒殺，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09