Html中input可以作為上傳圖片代碼如下

但是演示非常不好看，下面做一番美化處理，效果如下：

文件上傳美化前后對比

美化方法隱藏 input 標簽

使用 label 標簽在input標簽位置顯示；

用js獲取 input 中上傳的文件名稱，并在 lable 標簽中顯示

input[type=”file”] 美化之 Html/**

* input 文件上傳 Html

*

* @author 智慧宮

* @link https://www.hanost.com

*/

input[type=”file”] 美化之 CSS

使用opacity: 0; 隱藏input標簽，美化lable標簽；/**

* input 文件上傳 CSS

*

* @author 智慧宮

* @link https://www.hanost.com

*/

.img-upload {

position: relative;

display: inline-block;

width: 100%;

margin-bottom: 0;

height: calc(3.5rem + 28px);

}

.img-upload-input {

position: relative;

z-index: 2;

width: 100%;

height: calc(3rem + 28px);

margin: 0;

opacity: 0;

}

.img-upload-label {

position: absolute;

top: 0;

left: 0;

bottom: 0;

width: 100%;

background: #f0f0f0;

text-align: center;

padding: 1.5rem;

}

input[type=”file”] 美化之 JS

使用JS 來獲取上傳文件的名稱，并在 label 標簽中顯示上傳的文件名/**

* input 文件上傳 JS

*

* @author 智慧宮

* @link https://www.hanost.com

*/

$(".img-upload").on("change", "#img-upload-input", function () {

var filePath = $(this).val();

if (filePath.indexOf("jpg") != -1 || filePath.indexOf("png") != -1) {

var arr = filePath.split('\\');

var fileName = arr[arr.length - 1];

$("#img-upload-label").html(fileName);

}

})

美化效果展示

input 美化效果展示

總結

以上是生活随笔為你收集整理的html 美化input file,Input[type=”file”] 显示效果美化方法 | 智慧宫的全部內容，希望文章能夠幫你解決所遇到的問題。

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