自定义 input file 样式及 js 上传图片本地预览

biaowong

于 2020-11-16 11:37:07 发布

阅读量305

点赞数

分类专栏： javascript 文章标签： js html html5 javascript 前端

本文链接：https://blog.csdn.net/hxciwangbiao/article/details/109717900

版权

效果图

自定义 input file 效果预览

使用说明

复制代码，保存为 html 格式后，直接用浏览器打开即可。

代码

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>自定义 input file 样式及 js 上传图片本地预览</title>
        <!-- 图标字体库 -->
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <style type="text/css">
            .file {
   
                position: relative;
                display: inline-block;
                height: 30px;
                line-height: 30px;
                padding: 0 10px;
                background-color: #009688;
                color: #fff;
                white-space: nowrap;
                text-align: center;
                font-size: 15px;
                border: none;
                border-radius: 2px;
                cursor: pointer

最低0.47元/天解锁文章

biaowong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义 input file 样式及 js 上传图片本地预览

效果图使用说明复制代码，保存为 html 格式后，直接用浏览器打开即可。代码<!DOCTYPE html><html lang="zh-cn"> <head> <title>自定义 input file 样式及 js 上传图片本地预览</title>  <link href="http://netdna.bootstrapcdn.com
复制链接

扫一扫

专栏目录