如何显示使用相同 html 输入类型=文件选择的视频和图像的预览
how to show preview of a video and an image selected using the same html input type=file
我想在上传所选文件(视频和图片)之前显示它们的预览。到目前为止,我只能创建一个函数来显示这样的图像预览:-
<!-- button for selecting image/video -->
<label for="inp-img-vid">
<span> Photos/Videos</span>
<input type="file" accept="image/*, video/*" name="img-vid" id="inp-img-vid">
</label>
<div class="display-img-vid-con">
<!-- showing selected image here -->
<img src="" id="preview-img">
<!-- showing selected video here -->
<video controls>
<source src="" id="preview-vid">
Your browser does not support HTML5 video.
</video>
</div>
$("#inp-img-vid").change(function(){
imgPreview(this);
});
function imgPreview(input){
if(input.files && input.files[0]){
var reader = new FileReader();
reader.onload = function(e){
$("#preview-img").show().attr("src", e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
上面的代码显示了 #preview-img
中的图像正是我想要的。 现在我不知道如何显示 #preview-vid
中的视频,该视频是使用 jquery 通过 #inp-img-vid
输入标签选择的...任何帮助非常感谢。
为了使用相同的 <input>
按钮显示任何 <image>
和 <video>
,您必须 根据需要动态创建此类元素.
这意味着:
- 检测用户选择的文件类型。
- 创建所选文件的路径。
- 创建相关元素并将路径设置为
.src
输入。
- 从您的容器中删除任何预先存在的元素(通常是
<div>
)。
.append
新创建的要在页面上显示的元素。
否 JQuery 但这是使用常规 JavaScript 代码可以实现的方法:
- 我使用了你的 Div 作为容器(不得不添加一个
id="display-img-vid-con"
以供以后使用 JS 参考)。
- 添加了
style=""
和 absolute
position 以使用 top[=41= 控制容器的 X/Y 坐标] 和 左).
( ...用它做实验)
<!DOCTYPE html>
<html>
<body>
<!-- button for selecting image/video -->
<label for="inp-img-vid">
<span> Photos/Videos</span>
<input type="file" accept="image/*, video/*" name="img-vid" id="inp-img-vid">
</label>
<div class="display-img-vid-con" id="img-vid-con" style="top: 30px; left: 250px; position: absolute; z-index: 1" >
<!-- showing selected image here -->
<!-- showing selected video here -->
</div>
</body>
<script>
//$("#inp-img-vid").change( function(){ imgPreview(this); } );
document.getElementById("inp-img-vid").addEventListener("change", onFileSelected, false);
var tmpElement; //will be dynamically changed to Image or Video
var file, file_ext, file_path, file_type, file_name;
function show_Info_popUP()
{
alert("File is selected... " + "\n name : " + file_name + "\n type : " + file_type + "\n ext : " + file_ext );
}
function onFileSelected ( input )
{
//if(input.files && input.files[0])
if( input.target.files[0] )
{
file = input.target.files[0]; // FileList object
file_ext; //# will extract file extension
file_type = file.type; file_name = file.name;
file_path = (window.URL || window.webkitURL).createObjectURL(file);
//# get file extension (eg: "jpg" or "jpeg" or "webp" etc)
file_ext = file_name.toLowerCase();
file_ext = file_ext.substr( (file_ext.lastIndexOf(".")+1), (file_ext.length - file_ext.lastIndexOf(".")) );
//# get file type (eg: "image" or "video")
file_type = file_type.toLowerCase();
file_type = file_type.substr( 0, file_type.indexOf("/") );
let reader = new FileReader();
reader.readAsDataURL(file);
//reader.onload = function(e)
reader.onloadend = function(evt)
{
//# POP-UP ...if you want to show (Alert box with) file details...
show_Info_popUP();
if (evt.target.readyState == FileReader.DONE)
{
//# get container...
let container = document.getElementById("img-vid-con");
//# remove any already existing child element(s)
while (container.firstChild)
{ container.removeChild(container.firstChild); }
//# if IMAGE...
if ( file_type == "image" )
{
tmpElement = document.createElement( "img");
tmpElement.setAttribute("id", "preview-img");
}
//# if VIDEO...
if ( file_type == "video" )
{
tmpElement = document.createElement( "video");
tmpElement.setAttribute("id", "preview-vid");
tmpElement.setAttribute("controls", "true" );
tmpElement.addEventListener("loadeddata", () =>
{
//# what to do when some video data is loaded
if (tmpElement.readyState >= 3)
{
//# what to do when video's first frame is ready
tmpElement.muted = true; //# if you want silent preview
tmpElement.play();
}
});
}
//# finalise display size
tmpElement.width = 640; tmpElement.height = 400;
tmpElement.setAttribute("src", file_path);
container.appendChild(tmpElement);
}
}
}
}
</script>
</html>
在@freedomn-m 和@VC.One 的帮助下,我想出了这个答案,因为我知道 jQuery 多于 javascript 我将使用以下代码。
$("#inp-img-vid").change(function() {
imgPreview(this);
});
function imgPreview(input) {
var file = input.files[0];
var mixedfile = file['type'].split("/");
var filetype = mixedfile[0]; // (image, video)
if(filetype == "image"){
var reader = new FileReader();
reader.onload = function(e){
$("#preview-img").show().attr("src", e.target.result);
}
reader.readAsDataURL(input.files[0]);
}else if(filetype == "video"){
$("#preview-vid").show().attr("src", URL.createObjectURL(input.files[0]));
$("#videoPlayer")[0].load();
}else{
alert("Invalid file type");
}
}
我想在上传所选文件(视频和图片)之前显示它们的预览。到目前为止,我只能创建一个函数来显示这样的图像预览:-
<!-- button for selecting image/video -->
<label for="inp-img-vid">
<span> Photos/Videos</span>
<input type="file" accept="image/*, video/*" name="img-vid" id="inp-img-vid">
</label>
<div class="display-img-vid-con">
<!-- showing selected image here -->
<img src="" id="preview-img">
<!-- showing selected video here -->
<video controls>
<source src="" id="preview-vid">
Your browser does not support HTML5 video.
</video>
</div>
$("#inp-img-vid").change(function(){
imgPreview(this);
});
function imgPreview(input){
if(input.files && input.files[0]){
var reader = new FileReader();
reader.onload = function(e){
$("#preview-img").show().attr("src", e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
上面的代码显示了 #preview-img
中的图像正是我想要的。 现在我不知道如何显示 #preview-vid
中的视频,该视频是使用 jquery 通过 #inp-img-vid
输入标签选择的...任何帮助非常感谢。
为了使用相同的 <input>
按钮显示任何 <image>
和 <video>
,您必须 根据需要动态创建此类元素.
这意味着:
- 检测用户选择的文件类型。
- 创建所选文件的路径。
- 创建相关元素并将路径设置为
.src
输入。 - 从您的容器中删除任何预先存在的元素(通常是
<div>
)。 .append
新创建的要在页面上显示的元素。
否 JQuery 但这是使用常规 JavaScript 代码可以实现的方法:
- 我使用了你的 Div 作为容器(不得不添加一个
id="display-img-vid-con"
以供以后使用 JS 参考)。 - 添加了
style=""
和absolute
position 以使用 top[=41= 控制容器的 X/Y 坐标] 和 左).
( ...用它做实验)
<!DOCTYPE html>
<html>
<body>
<!-- button for selecting image/video -->
<label for="inp-img-vid">
<span> Photos/Videos</span>
<input type="file" accept="image/*, video/*" name="img-vid" id="inp-img-vid">
</label>
<div class="display-img-vid-con" id="img-vid-con" style="top: 30px; left: 250px; position: absolute; z-index: 1" >
<!-- showing selected image here -->
<!-- showing selected video here -->
</div>
</body>
<script>
//$("#inp-img-vid").change( function(){ imgPreview(this); } );
document.getElementById("inp-img-vid").addEventListener("change", onFileSelected, false);
var tmpElement; //will be dynamically changed to Image or Video
var file, file_ext, file_path, file_type, file_name;
function show_Info_popUP()
{
alert("File is selected... " + "\n name : " + file_name + "\n type : " + file_type + "\n ext : " + file_ext );
}
function onFileSelected ( input )
{
//if(input.files && input.files[0])
if( input.target.files[0] )
{
file = input.target.files[0]; // FileList object
file_ext; //# will extract file extension
file_type = file.type; file_name = file.name;
file_path = (window.URL || window.webkitURL).createObjectURL(file);
//# get file extension (eg: "jpg" or "jpeg" or "webp" etc)
file_ext = file_name.toLowerCase();
file_ext = file_ext.substr( (file_ext.lastIndexOf(".")+1), (file_ext.length - file_ext.lastIndexOf(".")) );
//# get file type (eg: "image" or "video")
file_type = file_type.toLowerCase();
file_type = file_type.substr( 0, file_type.indexOf("/") );
let reader = new FileReader();
reader.readAsDataURL(file);
//reader.onload = function(e)
reader.onloadend = function(evt)
{
//# POP-UP ...if you want to show (Alert box with) file details...
show_Info_popUP();
if (evt.target.readyState == FileReader.DONE)
{
//# get container...
let container = document.getElementById("img-vid-con");
//# remove any already existing child element(s)
while (container.firstChild)
{ container.removeChild(container.firstChild); }
//# if IMAGE...
if ( file_type == "image" )
{
tmpElement = document.createElement( "img");
tmpElement.setAttribute("id", "preview-img");
}
//# if VIDEO...
if ( file_type == "video" )
{
tmpElement = document.createElement( "video");
tmpElement.setAttribute("id", "preview-vid");
tmpElement.setAttribute("controls", "true" );
tmpElement.addEventListener("loadeddata", () =>
{
//# what to do when some video data is loaded
if (tmpElement.readyState >= 3)
{
//# what to do when video's first frame is ready
tmpElement.muted = true; //# if you want silent preview
tmpElement.play();
}
});
}
//# finalise display size
tmpElement.width = 640; tmpElement.height = 400;
tmpElement.setAttribute("src", file_path);
container.appendChild(tmpElement);
}
}
}
}
</script>
</html>
在@freedomn-m 和@VC.One 的帮助下,我想出了这个答案,因为我知道 jQuery 多于 javascript 我将使用以下代码。
$("#inp-img-vid").change(function() {
imgPreview(this);
});
function imgPreview(input) {
var file = input.files[0];
var mixedfile = file['type'].split("/");
var filetype = mixedfile[0]; // (image, video)
if(filetype == "image"){
var reader = new FileReader();
reader.onload = function(e){
$("#preview-img").show().attr("src", e.target.result);
}
reader.readAsDataURL(input.files[0]);
}else if(filetype == "video"){
$("#preview-vid").show().attr("src", URL.createObjectURL(input.files[0]));
$("#videoPlayer")[0].load();
}else{
alert("Invalid file type");
}
}