html虚线框内拖拽上传文件

103次阅读
没有评论

平常上传文件都是点击上传,而且上传的样式也不太好看,那这里就教大家一种虚线框内拖拽上传文件的方式,效果图如下:html虚线框内拖拽上传文件

这里为了排版好看,使用了bootstrap进行美化,主要的实现逻辑是把input标签放在div标签里面,然后把input的大小调成和div标签一样大。具体实现代码如下:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv='content-language' content='zh_CN'>
    <title>拖拽上传文件</title>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!--bootstrap图标库-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

    <!--    上传图片插件fileinput.css-->
    <link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/css/fileinput.min.css" media="all"
          rel="stylesheet" type="text/css"/>

    <style>
        /*以下为core-right.html的css文件 开始*/
        /*设置上传文件样式开始*/
        .file-outer-layer{
            position: relative;
            border-style: dashed;
            border-width: 2px;
            border-color: gainsboro;
            height: 400px;
            border-radius: 2%; /* 设置圆角 */
        }
        .file-input {
            opacity: 0; /* 透明度 */
            z-index: 99; /* 当标签重叠时的排序 */
            cursor: pointer; /* 鼠标悬停 */
        }
        #upload-button {
            z-index: 96;
            position: absolute;
            left: 42%;
            top: 47%;
        }
        #upload-tips {
            z-index: 98;
            position: absolute;
            top: 28%;
            font-size: 25px;
            color: darkgray;
        }
        #set-background {
            z-index: 95;
            position: absolute;
            background-color: white;
            border-radius: 2%;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row mt-3">
        <div class="col-12">
            <!--    引入核心右-->
                <div class="main-right-core">
                    <form name="form" id="form" target="frameName">
                        <div class="file-outer-layer  vw-40 mt-5">

                            <div class="container text-center" id="upload-tips">
                                <div class="row justify-content-start">
                                    <div class="col">
                                        <span>点击虚线框上传文档 或 拖拽文档到虚线框上传文件,支持文件格式.pdf</span>
                                    </div>
                                </div>
                            </div>

                            <!--                上传文件区域背景颜色-->
                            <div id="set-background" class=" w-100 h-100"></div>

                            <!--                上传文件按钮-->
                            <input type="file" id="btn-file" name="file" title="" class="file-input w-100 h-100" accept=".pdf"
                                   style="background-color: brown" multiple
                                   onchange="getFile(value)">

                            <!--                上传文件的图标,文件名,文件大小-->
                            <div id="upload-button">
                                <button type="button" class="btn btn-primary btn-lg"><i class="bi bi-upload"></i> 上传文件</button>
                                <div class="mt-2">
                                    <span id="fileName"></span>&nbsp;&nbsp;<span id="fileSize"></span>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>

            </div>
        </div>
    </div>

<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

<!--上传图片插件fileinput.js-->
<!--<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/js/fileinput.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script>
    function getFile(value) {
        // var upload = $("#btn-file");
        var upload = document.getElementById('btn-file');
        var spanFileName= document.getElementById('fileName');
        var spanFileSize= document.getElementById('fileSize');
        window.fileName = upload.files[0].name;
        var size = upload.files[0].size;
        var fileSize = size/(1024*1024);
        var fileSize2 = fileSize.toFixed(2);
        // var type = upload.files[0].type;
        spanFileName.innerHTML = fileName;
        spanFileSize.innerHTML = fileSize2 + "MB";
    }
</script>
</body>
</html>

这里还有个简单点的实现,没上面这么复杂,相对来说没有那么美观,具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖放上传</title>
    <style>
        #frame {
            height: 200px;
            width: 300px;
            background-color: #F8F8F8;
            border: 2px dashed #D8D8D8;
            margin-top: 200px;
            margin-left: 200px;
        }
        input {
            width: 100%;/*设置和外边框一样宽*/
            height: 100%;/*设置和外边框一样高*/
            opacity: 0;/*设置为不透明*/
            cursor: pointer;/* 鼠标悬停为手形状 */
        }
    </style>
</head>
<body>
<div id="frame">
    <input type="file" name="file" style="width: 100%;height: 100%;opacity: 0;cursor: pointer;" >
</div>
</body>
</html>

 

 

 

正文完
 
评论(没有评论)