qq_46218155 2021-01-06 17:12 采纳率: 0%
浏览 369

input file 文件上传拖拽区域问题

在input的files中，只有把图片移到input的区域中才能上传，有什么方式能控制图片上传的拖动放置区域？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .warp {
            position: relative;
            display: inline-block;
            text-align: center;
            background-color: rgb(251, 253, 255);
            border: 1px dashed #c0ccda;
            border-radius: 6px;
            box-sizing: border-box;
            width: 148px;
            height: 148px;
            line-height: 148px;

        }
        .warp:hover{
            border: 1px dashed rgb(64,158,255);
        }

        .warp-content {
            position: absolute;
            left: 60px;
            font-size: 28px;
            color: rgb(140, 147, 157);
            line-height: 148px;
            text-align: center;
        }

        input {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        .img_ul{
            margin: 0px;
            padding: 0px;
            display: inline-block;
        }
        .img_li{
            position: relative;
            display: inline-block;
            margin-right: 8px;
            background-color: rgb(251, 253, 255);
            border: 1px solid rgb(192, 204, 218);
            border-radius: 6px;
            box-sizing: border-box;
            width: 148px;
            height: 148px;
            overflow: hidden;
            -webkit-transition:all 0.3s linear;
            -moz-transition:all 0.3s linear;
            -o-transition:all 0.3s linear;
            transition:all 0.3s linear;
        }
        .picture{
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
            width: 100%;
        }
        .zhezha{
            width: 100%;
            height: 100%;
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0,0,0,0.7);
            z-index: 2222;
        }
        .zhezha2{
            width: 100%;
            height: 100%;
            display: block;
            position: fixed;
            left: 0;
            top: 0;
            background: rgba(0,0,0,0.7);
            z-index: 2222;
        }
        .zhezha3{
            width: 100%;
            height: 100%;
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0,0,0,0.7);
            z-index: 5555;
        }
        .fangda{
            height: 70%;
            display: block;
            position: fixed;
            left: 0;
            top: 15%;
            background: rgba(0,0,0,0.7);
            z-index: 2223;
        }
        .icon1{
            left: -30%;
        }
        .fd{
            right: -30%;
        }
        .icon1,.fd{
            width: 22px;
            height: 22px;
            position: absolute;
            top: 40%;
            cursor: pointer;
            z-index: 3333;
            -webkit-transition:all 0.3s linear;
            -moz-transition:all 0.3s linear;
            -o-transition:all 0.3s linear;
            transition:all 0.3s linear;
        }
        .img_li:hover .zhezha{
            display: block;
        }
        .img_li:hover .icon1{
            left: 30%;
        }
        .img_li:hover .fd{
            right: 30%;
        }
        .fileBox{
            display: inline-block;
            position: relative;
        }
    </style>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/jquery-ui-1.10.3.min.js"></script>
</head>
<body>

<div class="fileBox" >
    <div class="zhezha3"></div>
    <div class="img_area">
        <ul class="img_ul">
            <!--            <li class="img_li">-->
            <!--                <img class="picture" src="" alt="">-->
            <!--                <div class="zhezha"></div>-->
            <!--                <svg onclick="del(this)" t="1609744633190" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3925" width="200" height="200">-->
            <!--                    <path  d="M599.733333 128A61.653333 61.653333 0 0 1 661.333333 189.6V192H362.666667v-2.4A61.653333 61.653333 0 0 1 424.266667 128h175.466666m0-64h-175.466666A125.653333 125.653333 0 0 0 298.666667 189.6V256h426.666666V189.6A125.653333 125.653333 0 0 0 599.733333 64z" fill="#ffffff" p-id="3926"></path>-->
            <!--                    <path  d="M928 192H96a32 32 0 0 0 0 64h832a32 32 0 0 0 0-64zM394.666667 394.666667a32 32 0 0 0-32 32v320a32 32 0 0 0 64 0V426.666667a32 32 0 0 0-32-32zM629.333333 394.666667a32 32 0 0 0-32 32v320a32 32 0 0 0 64 0V426.666667a32 32 0 0 0-32-32z" fill="#ffffff" p-id="3927"></path>-->
            <!--                    <path  d="M821.333333 341.333333a32 32 0 0 0-32 32v416a106.666667 106.666667 0 0 1-106.666666 106.666667H341.333333a106.666667 106.666667 0 0 1-106.666666-106.666667V373.333333a32 32 0 0 0-64 0v416a170.666667 170.666667 0 0 0 170.666666 170.666667h341.333334a170.666667 170.666667 0 0 0 170.666666-170.666667V373.333333a32 32 0 0 0-32-32z" fill="#ffffff" p-id="3928" >-->
            <!--                    </path></svg>-->
            <!--                <svg t="1609744697945" class="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5461" width="200" height="200">-->
            <!--                    <path d="M950.221 902.552L679.275 631.606c49.481-60.042 79.2-136.978 79.2-220.856 0-191.919-155.582-347.5-347.5-347.5-191.919 0-347.5 155.581-347.5 347.5 0 191.918 155.581 347.5 347.5 347.5 84.273 0 161.538-30.002 221.702-79.903l270.874 270.874c12.888 12.887 33.782 12.887 46.67 0 12.886-12.888 12.886-33.783 0-46.669zM98.476 410.75c0-172.589 139.911-312.5 312.5-312.5 172.588 0 312.5 139.911 312.5 312.5 0 172.588-139.912 312.5-312.5 312.5-172.59 0-312.5-139.911-312.5-312.5z" fill="#ffffff" p-id="5462"></path>-->
            <!--                </svg>-->
            <!--            </li>-->
        </ul>
        <div class="warp">
            <span class="warp-content">+</span>
            <input type="file" id="file" multiple="multiple" />
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        var flag = 0;
        $("#file").on("change",function () {
            // $(".fileBox").on("mouseover",function () {
            //     $(".zhezha3").css("display","block");
            // })
            for(var i=0;i<this.files.length;i++){
                var fileData = this.files[i];
                var reader = new FileReader();
                flag = parseInt(flag)+i+1;
                reader.readAsDataURL(fileData);
                (function (i) {
                    reader.onload =function () {
                        var imgfor = this.result;
                        var imghtml = ` <li class="img_li">
                <img class="picture picture`+(i+parseInt(flag))+`" src="`+imgfor+`" alt="">
                <div class="zhezha"></div>
                <svg t="1609744633190" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3925" width="200" height="200">
                    <path  d="M599.733333 128A61.653333 61.653333 0 0 1 661.333333 189.6V192H362.666667v-2.4A61.653333 61.653333 0 0 1 424.266667 128h175.466666m0-64h-175.466666A125.653333 125.653333 0 0 0 298.666667 189.6V256h426.666666V189.6A125.653333 125.653333 0 0 0 599.733333 64z" fill="#ffffff" p-id="3926"></path>
                    <path  d="M928 192H96a32 32 0 0 0 0 64h832a32 32 0 0 0 0-64zM394.666667 394.666667a32 32 0 0 0-32 32v320a32 32 0 0 0 64 0V426.666667a32 32 0 0 0-32-32zM629.333333 394.666667a32 32 0 0 0-32 32v320a32 32 0 0 0 64 0V426.666667a32 32 0 0 0-32-32z" fill="#ffffff" p-id="3927"></path>
                    <path  d="M821.333333 341.333333a32 32 0 0 0-32 32v416a106.666667 106.666667 0 0 1-106.666666 106.666667H341.333333a106.666667 106.666667 0 0 1-106.666666-106.666667V373.333333a32 32 0 0 0-64 0v416a170.666667 170.666667 0 0 0 170.666666 170.666667h341.333334a170.666667 170.666667 0 0 0 170.666666-170.666667V373.333333a32 32 0 0 0-32-32z" fill="#ffffff" p-id="3928" >
                    </path></svg>
                <svg t="1609744697945" class="icon2`+(i+parseInt(flag))+` fd" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5461" width="200" height="200">
                    <path d="M950.221 902.552L679.275 631.606c49.481-60.042 79.2-136.978 79.2-220.856 0-191.919-155.582-347.5-347.5-347.5-191.919 0-347.5 155.581-347.5 347.5 0 191.918 155.581 347.5 347.5 347.5 84.273 0 161.538-30.002 221.702-79.903l270.874 270.874c12.888 12.887 33.782 12.887 46.67 0 12.886-12.888 12.886-33.783 0-46.669zM98.476 410.75c0-172.589 139.911-312.5 312.5-312.5 172.588 0 312.5 139.911 312.5 312.5 0 172.588-139.912 312.5-312.5 312.5-172.59 0-312.5-139.911-312.5-312.5z" fill="#ffffff" p-id="5462"></path>
                </svg>
            </li>`;
                        $(".img_ul").append(imghtml);
                        $(".picture"+(i+parseInt(flag))).get(0).onload = function(){
                            var imgh = $(this).css("height");
                            var imgw = $(this).innerWidth();
                            if(parseInt(imgh) > parseInt(imgw)){
                                $(this).css("height","146px");
                                $(this).css("width","auto");
                            }
                        }
                        $(".icon1").on("click",function () {
                            $(this).parent().remove();
                        })
                        $(".icon2"+(i+parseInt(flag))).on("click",function () {
                            var fdhtml=`<div class="zhezha2"></div>
    <img class="fangda" src="`+imgfor+`" alt="">`;
                            $("body").append(fdhtml);
                            var fdw = $(".fangda").innerWidth();
                            var fdh = $(".fangda").innerHeight();
                            var getBodyh=$(document).height();
                            var getBodyw=$(document).width();
                            if(fdw-fdh<10&&fdw-fdh>-10){
                                if(getBodyh > getBodyw){
                                    $(".fangda").css("width","60%");
                                    $(".fangda").css("height","auto");
                                    var result=(parseInt(getBodyh)-parseInt($(".fangda").css('height')))/2+"px";
                                    $(".fangda").css("top",result);
                                    $(".fangda").css("left","20%");
                                }else if(getBodyh < getBodyw){
                                    $(".fangda").css("height","60%");
                                    $(".fangda").css("width","auto");
                                    $(".fangda").css("top","20%");
                                    var result=(parseInt(getBodyw)-parseInt($(".fangda").css('width')))/2+"px";
                                    $(".fangda").css("left",result);
                                }else{
                                    $(".fangda").css("height","60%");
                                    $(".fangda").css("width","60%");
                                    $(".fangda").css("top","20%");
                                    $(".fangda").css("left","20%");
                                }
                            }else{
                                if(fdw > fdh){
                                    $(".fangda").css("width","60%");
                                    $(".fangda").css("height","auto");
                                    $(".fangda").css("left","20%");
                                    var result=(parseInt(getBodyh)-parseInt($(".fangda").css('height')))/2+"px";
                                    $(".fangda").css("top",result);
                                }else if(fdw < fdh){
                                    $(".fangda").css("height","80%");
                                    $(".fangda").css("width","auto");
                                    $(".fangda").css("top","10%");
                                    var result=(parseInt(getBodyw)-parseInt($(".fangda").css('width')))/2+"px";
                                    $(".fangda").css("left",result);
                                }
                            }
                            $(document).on("mousedown",function () {
                                $(".zhezha2").remove();
                                $(".fangda").remove();
                                $(document).unbind("mousedown");
                                // $(".fileBox").unbind("mouseover")
                                // $(".zhezha3").css("display","none");
                            })
                        })
                    }
                })(i)
            }
        })

    })
</script>
</body>
</html>

怎么设置input的拖拽区域到filebox

  • 写回答

1条回答 默认 最新

  • lshen01 2023-03-16 20:50
    关注

    参考GPT和自己的思路：

    要控制上传图片的拖动放置区域，可以通过设置 CSS 样式来实现。在 HTML 中，可以将 input 标签嵌套在一个 div 中，并设置该 div 的样式来控制上传区域，如下所示：

    <div class="filebox">
  <input type="file">
</div>

    然后在 CSS 样式表中设置 filebox 的样式：

    .filebox {
  border: 1px solid #ccc;
  width: 200px;
  height: 200px;
  padding: 20px;
  text-align: center;
}

.filebox input[type="file"] {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}

    通过以上设置，input 的上传区域就被限制在了 file

    评论

报告相同问题？

悬赏问题

  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab，jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算
  • ¥15 java如何提取出pdf里的文字？