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 美化效果展示
