我只需将CSS和jQuery与change
函数一起应用,即可将拖放功能集成到我的站点中。
该代码在Firefox和Chrome中有效,但在Edge中无效。如果我尝试拖放文件,则什么也不会发生。但是,在其他浏览器上,如果我将文件拖放到上载窗口中,则可以正常运行。
拖放功能在Edge中不起作用怎么办?
$(document).ready(function() {
$('form input').change(function() {
$('form p').text(this.files.length + " file(s) selected");
});
});
form {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
width: 500px;
height: 200px;
border: 4px dashed #fff;
}
form p {
width: 100%;
height: 100%;
text-align: center;
line-height: 170px;
color: #ffffff;
font-family: Arial;
}
form input {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
form button {
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 508px;
height: 35px;
margin-top: -20px;
margin-left: -4px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
form button:hover {
background: #149174;
color: #0C5645;
}
form button:active {
border: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="upload.php" method="POST">
<input type="file" multiple>
<p>Drag your files here or click in this area.</p>
<button type="submit">Upload</button>
</form>