我希望能够上传视频并在HTML页面中显示。目前,我已经成功地将图片上传并在页面上显示。
我该怎么做才能将视频也实现同样的功能呢?
我的代码:
$('#addPhotosBtn').click(function() {
$(this).parents().find('#addPhotosInput').click();
});
document.getElementById('addPhotosInput').onchange = e => {
const file = e.target.files[0];
const url = URL.createObjectURL(file);
const li = ` <li> <img src=" ${url} ">
<span><i class="fa fa-trash"></i></span>
</li>`
$('.photos-list ul').append(li);
};
.photos-list ul,
.videos-list ul {
margin: 0px;
padding: 0px;
}
.photos-list ul li,
.videos-list ul li {
list-style: none;
float: left;
width: 19%;
margin: 5px;
position: relative;
}
.photos-list ul li img,
.videos-list ul li img {
width: 100%;
border-radius: 10px;
height: 110px;
}
.photos-list ul li span,
.videos-list ul li span {
position: absolute;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .5);
padding: 5px 10px;
cursor: pointer;
}
.photos-list ul li span svg,
.videos-list ul li span svg {
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<input type="file" class="d-none" id="addPhotosInput">
<button class="btn btn-secondary" id="addPhotosBtn">Add Photos <i class="fa fa-camera"></i> </button>
</div>
<div class="col-md-12">
<div class="photos-list">
<ul>
</ul>
</div>
</div>
</div>
</div>
感谢您的努力!
validExtensions = ["mp4","webm","wmv"];
这样。 - Hardik Godhani