欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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正則表達(dá)式，匹配是否擁有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)文章

最新評論