做网站学什么语言,永久免费个人网页申请,wordpress虚拟货币,wordpress登录卡死Html中input可以作为上传图片代码如下但是演示非常不好看#xff0c;下面做一番美化处理#xff0c;效果如下#xff1a;文件上传美化前后对比美化方法隐藏 input 标签使用 label 标签在input标签位置显示#xff1b;用js获取 input 中上传的文件名称#xff0c;并在 labl…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 美化效果展示
