JS使用H5實現圖片預覽功能

 更新時間:2019年09月30日 14:02:49   作者:feri   我要評論
這篇文章主要為大家詳細介紹了JS使用H5實現圖片預覽功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

JS使用H5實現上傳圖片預覽的功能,以下是代碼的實現:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上傳預覽</title>
<script type="text/javascript">
//預覽圖片,參數說明:第一個參數:要預覽的file對象,第二個參數:預覽的img標簽的id名稱
function yl(obj,id) {
 //FileReader
 if(window.FileReader){//驗證當前的瀏覽器是否支持圖片預覽
  var reader=new FileReader();
  var file=obj.files[0];
  var regexImage=/^image\//;//js正則表達式,匹配是否擁有image
  if(regexImage.test(file.type)){
   //設置讀取結束的回調函數
   reader.οnlοad=function(data){
   var img=document.getElementById(id);
   img.src=data.target.result;//將結果數據顯示到img標簽上

   };
   //開始讀取上傳的文件內容
   reader.readAsDataURL(file);
  }else{
   alert("親,看清楚是圖片預覽");
   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="圖片預覽" id="ylimg" width="400px" height="400px"/>
<input type="submit" value="上傳圖片"/>
</form>
</body>
</html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論

北京pk赛车人工计划软件手机版