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

编程问答

input标签获取图片文件尺寸

發布時間：2024/9/30 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 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"><input type="file" id="exampleInputFile" name="icon" onchange=uploadImg(this)><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标签获取图片文件尺寸的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： nodejs接收get请求参数
下一篇： Express中间件工作原理介绍

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

编程问答

input标签获取图片文件尺寸

總結