<html>
<head>
<style>
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
/* Separate rule for compatibility, :focus-within is required on modern Firefox and Chrome */
input.visually-hidden:focus+label {
outline: thin dotted;
}
input.visually-hidden:focus-within+label {
outline: thin dotted;
}
</style>
</head>
<body>
<video src="blob:http://localhost:3333/b9106407-71f5-4329-b687-197549c18196" controls="controls"></video>
<button onClick="sendFiles()">上传到服务器</button>
<hr />
<!-- 当用户选择一个文件时，handleFiles() 方法会用一个 FileList 对象作为参数被调用，FileList 对象包含表示用户选择的文件的 File 对象。如果你想让用户选择多个文件，只需在 input 元素上使用 multiple 属性： -->
<input type="file" id="input" multiple onchange="handleFiles(this)">
<hr />
<p>通过 click() 方法使用隐藏的 file input 元素</p>
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<button id="fileSelect">Select some files</button>
<hr />
<p>使用 label 元素来触发一个隐藏的 file input 元素</p>
<input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden">
<label for="fileElem">Select some files
<img src="https://upload.jianshu.io/users/upload_avatars/2103305/06ca5c5d-8f08-4b96-9abc-1126cb97906c.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
alt="">
</label>
<hr />
<p>使用拖放来选择文件</p>
<p id="dropbox" style="width:100px;height: 100px;border: 1px solid black;">拖放文件于此处</p>
<hr />
<div id="preview"></div>
<script>
// const selectFile = document.getElementById("input").files[0]
// function handleFiles(file) {
// debugger;
// }
//动态添加change监听器
// const inputElement = document.getElementById("input");
// inputElement.addEventListener("change", handleFiles, false);
// function handleFiles() {
// const fileList = this.files; /* now you can work with the file list */
// debugger
// }
// 处理click事件
const fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
}, false);
//使用拖放来选择文件
let dropbox;
dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
debugger
var files = dt.files;
handleFiles(files);
}
function handleFiles(files) {
debugger
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /^image\//;
if (!imageType.test(file.type)) {
continue;
}
var img = document.createElement("img");
//classList 属性是只读的，返回元素的类名，但你可以使用 add() 和 remove() 方法修改它。
img.classList.add("obj");
img.file = file;
const preview = document.getElementById("preview");
preview.appendChild(img); // 假设"preview"就是用来显示内容的div
var reader = new FileReader();
reader.onload = (function (aImg) {
return function (e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}
//上传一个用户选择的文件
function sendFiles() {
var imgs = document.querySelectorAll(".obj");
for (var i = 0; i < imgs.length; i++) {
new FileUpload(imgs[i], imgs[i].file);
}
}
function FileUpload(img, file) {
var reader = new FileReader();
// this.ctrl = createThrobber(img);
var xhr = new XMLHttpRequest();
this.xhr = xhr;
var self = this;
this.xhr.upload.addEventListener("progress", function (e) {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
self.ctrl.update(percentage);
}
}, false);
xhr.upload.addEventListener("load", function (e) {
self.ctrl.update(100);
var canvas = self.ctrl.ctx.canvas;
canvas.parentNode.removeChild(canvas);
}, false);
xhr.open("POST", "https://mocks");
xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
reader.onload = function (evt) {
xhr.send(evt.target.result);
};
reader.readAsBinaryString(file);
}
</script>
</html>
<html>
<body>
<video style="height:auto;" src="" id="video0" controls="controls"></video>
<input class="form-control" type="file" style="height:auto;" id="video" name="video" />
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
// hTML5实现表单内的上传文件框，上传前预览视频，刷新预览video，使用HTML5 的File API,
// 建立一个可存取到该file的url，一个空的video标签，ID为video0,把选择的文件显示在video标签中，实现视频预览功能。
// 需要选择支持HTML API的浏览器。
$("#video").change(function () {
var objUrl = getObjectURL(this.files[0]);
console.log("objUrl = " + objUrl);
if (objUrl) {
alert(objUrl)
$("#video0").attr("src", objUrl);
}
});
//建立一个可存取到该file的url
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
// basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
// mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
// webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
js上传图片视频
猜你喜欢
转载自blog.csdn.net/cs18335818140/article/details/108751668
今日推荐
周排行