gpt4 book ai didi

javascript - 如何突出显示拖动文件的唯一 div?

转载 作者:行者123 更新时间:2023-12-01 08:33:30 25 4
gpt4 key购买 nike

我有一个带有input type="file"的表单,总共有3个输入。因此,根据客户请求,我对设计进行了一些更改,并隐藏 input type="file" 上的默认样式,并将其转换为拖放样式。现在的问题是,当我在input部分中拖动文件时,我需要突出显示文件被拖动的div,因为我只有4个输入突出显示我为突出显示 div

编写的最后一个脚本

HMTL

    <div class="col-sm-4">
<label for="exampleInputFile">File Before</label>
<div class="file-drop-area border">

<input type="file" id="exampleInputFile" class="file_before files" name="file_before[]" multiple required>
<p class="message" name="drag">Drag your files here or click in this area.</p>
</div>
<div class="file_before_append"></div>
</div>

<div class="col-sm-4">
<div class="form-group">
<label for="exampleInputFile">File After</label>
<div class="file_after-drop-area border">
<input type="file" id="exampleInputFile" class="file_after files" name="file_after[]" multiple required>
<p class="message">Drag your files here or click in this area.</p>
</div>
<div class="file_after_append"></div>
</div>

脚本

 <script>

var $fileInput = $('.file_after');
var $droparea = $('.file_after-drop-area');

$fileInput.on('dragenter focus click', function () {
$droparea.addClass('is-active');

});

$fileInput.on('dragleave blur drop', function () {
$droparea.removeClass('is-active');
});

</script>

<script>

var $fileInput = $('.file_before');
var $droparea = $('.file-drop-area');

$fileInput.on('dragenter focus click', function () {
$droparea.addClass('is-active');

});

$fileInput.on('dragleave blur drop', function () {
$droparea.removeClass('is-active');
});

</script>
Runs only the 2nd script you can say it runs the last script

CSS

     form input.files{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
opacity: 0;
}
.border{
border: 2px dashed #d2d6de;
height: 40px;
}
form .message{
width: 100%;
height: 100%;
text-align: center;
line-height: 35px;
overflow: hidden;
color: #d2d6de;
}
label.col-sm-10 {
padding-left: initial;
}
.file-drop-area {
position: relative;
display: flex;
width: 450px;
max-width: 100%;
transition: 0.2s;
}
.file-drop-area.border.is-active {
border: 2px dashed black;
}
.file_after-drop-area {
position: relative;
display: flex;
width: 450px;
max-width: 100%;
transition: 0.2s;
}
.file_after-drop-area.border.is-active {
border: 2px dashed black;
}

现在我想突出显示我将鼠标悬停在拖动文件上的 div jsfiddle link

最佳答案

这里不能对不同的方法使用相同的变量。通过使用 var fileinput。

Check out我复制并修改的 fiddle

关于javascript - 如何突出显示拖动文件的唯一 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59661206/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com