日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

input标签获取图片文件尺寸

發布時間：2024/9/30 编程问答 35 豆豆
生活随笔 收集整理的這篇文章主要介紹了 input标签获取图片文件尺寸 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
  • 思路分析
    • （1）給input標簽設置一個onchange事件
      • 當input標簽的type屬性為file時，我們可以給該input標簽設置一個onchange事件來監聽文件選擇的變化
  • （2）在onchange事件中使用FileReader讀取選取文件的信息
    • FileReader類支持異步讀取input標簽文件信息（大小，時間，數據等）
  • （3）使用一個img標簽來顯示獲取的圖片（如果不需要顯示可以設置hidden隱藏）
    • 之所以需要這一步，是因為FileReader無法獲取圖片的大小，它只能得到文件的數據，所以需要將文件數據賦值給img標簽的src屬性

  • （4）通過img標簽的offsetHeight和offsetWidth獲取圖片的尺寸

  • 效果演示

  • 完整代碼
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><form id="form"><!-- 1.給input標簽添加一個onchange事件：一旦選擇文件發生變化則會觸發 目的：獲取選擇圖片的原始數據 --><input type="file" id="exampleInputFile" name="icon" onchange=uploadImg(this)><!-- 2.用一個img標簽來接收文件數據 目的：（1）先接收文件數據 （2）通過offsetHeight屬性獲取寬高 --><img src="" alt="" id="11111"><p>請上傳圖片.</p></form></body><script>//選擇圖片，馬上預覽function uploadImg(obj) {//1.讀取文件詳細信息var file = obj.files[0];console.log(obj);console.log(file);//2.使用FileReader讀取文件信息var reader = new FileReader();//4.監聽讀取文件過程方法,異步過程reader.onloadstart = function (e) {console.log("開始讀取....");}reader.onprogress = function (e) {console.log("正在讀取中....");}reader.onabort = function (e) {console.log("中斷讀取....");}reader.onerror = function (e) {console.log("讀取異常....");}reader.onload = function (e) {console.log("成功讀取....");console.log(this.reault);//或者 img.src = this.result; //e.target == thisvar img = document.getElementById("11111");//將解析的base64字符串賦值給img標簽img.src = e.target.result;//5.這里需要異步獲取，避免線程延遲setTimeout(function(){window.alert('高度' + img.offsetHeight + '寬度' + img.offsetWidth);},1000);}//3.開始讀取reader.readAsDataURL(file)}</script></html>

總結

以上是生活随笔為你收集整理的input标签获取图片文件尺寸的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。