一、問題
在使用file表單時想知道選擇的文件的路徑、名字、大小、類型？
二、知識點
1.input表單會觸發change事件
2.獲取路徑 觸發這個事件的對象調用val()函數
3.文件名 觸發事件后會有一個事件對象e.currentTarget.files[0].name
4.文件大小 e.currentTarget.files[0].size 字節
5.文件類型 e.currentTarget.files[0].type
三、測試代碼
<body> <p class="inp_file_name">未選擇</p> <input type="file" class="inp_file"> <button class="cancel_file_but">清除選擇的文件</button></body><script src="./js/jquery-3.3.1.js"></script><script> $('.inp_file').change(function(e){ // console.log($(this).val());//val()獲取到的是完整的文件路徑值；C:/fakepath/js-dom.png console.log(e) /* 簡單的獲取選擇文件的名字 currentTarget:獲取到的是綁定事件的對象 e.currentTarget.files 是一個數組，如果支持多個文件，則需要遍歷 */ var fileMsg = e.currentTarget.files; var fileName = fileMsg[0].name; console.log(fileName);//js-dom.png //大小 字節 var fileSize = fileMsg[0].size; console.log(fileSize);//350061 //類型 var fileType = fileMsg[0].type; console.log(fileType);//image/png // 判斷文件類型 var type=(fileType.substr(fileType.lastIndexOf("."))).toLowerCase(); if(type!=".jpg"&&type!=".gif"&&type!=".jpeg"&& type!=".png"){ alert("您上傳圖片的類型不符合(.jpg|.jpeg|.gif|.png)！"); return false; } $('.inp_file_name').text(fileName) }) $('.cancel_file_but').click(function(){ $('.inp_file').val(null); })</script>四、效果
未選前
選擇后
若有不足請多多指教！希望給您帶來幫助！
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。如果你想了解更多相關內容請查看下面相關鏈接
新聞熱點
疑難解答
