<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="../css/custom.css">
</head>
<style>
@font-face {
font-family: "iconfont";
src: url('iconfont.ttf?t=1527488506358') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+/
url('iconfont.svg?t=1527488506358#iconfont') format('svg');
/ iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-luyinshuohuashengyin:before {
content: "\e6b2";
}
.icon-camera:before {
content: "\e5a1";
}
.icon-xiangce:before {
content: "\e707";
}
</style>
<body>
<div class="page">
<div class="page_title" contenteditable="true">
请输入标题
</div>
<div class="page_text" contenteditable="true">
输入正文
</div>
<div class="page_task">
<label for="album" class="album">
<i class='iconfont icon-xiangce'></i>
</label>
<input id="album" value="相机" name='file' type="file" accept="image/*" ;capture="camera">
<label for="SoundRecording" class="SoundRecording">
<i class='iconfont icon-luyinshuohuashengyin'></i>
</label>
<input id="SoundRecording" value="录音" type="file" accept="audio/*" ;capture="microphone">
<label for="videoTape" class="videoTape">
<i class='iconfont icon-camera'></i>
</label>
<input id="videoTape" value="录像" name='file' type="file" accept="video/*" ;capture="camcorder">
</div>
</div>
</body>
<script>
window.onload = function () {
let album = document.getElementById('album') //相册
let SoundRecording = document.getElementById('SoundRecording') //录音
let videoTape = document.getElementById('videoTape') //录像
let page_text = document.getElementsByClassName('page_text')[0] //正文
let page_title = document.getElementsByClassName('page_title')[0] //标题
// 获取焦点
page_text.onfocus = function () {
this.innerHTML = ''
this.onfocus = null
}
page_title.onfocus = function () {
this.innerHTML = ''
this.onfocus = null
}
// 点击相册展示图片
album.onchange = function () {
page_text.focus()
page_text.onfocus = function () {
ImagePath = window.URL.createObjectURL(album.files[0]);
document.execCommand('InsertImage', false, ImagePath);
// 结果 base64
readFile(album)
}
}
// 点击录音展示音频
SoundRecording.onchange = function () {
page_text.focus()
page_text.onfocus = function () {
ImagePath = window.URL.createObjectURL(SoundRecording.files[0]);
document.execCommand('insertHTML', 'false', ' <audio src="' + ImagePath + '" controls="controls"></audio>');
}
}
// 点击录像展示音频
videoTape.onchange = function () {
page_text.focus()
page_text.onfocus = function () {
ImagePath = window.URL.createObjectURL(videoTape.files[0]);
document.execCommand('insertHTML', 'false', "<video id='video1' style='width:100%; margin:0px;' controls><source src='" + ImagePath + "' type='video/mp4' /> </video>");
}
}
// 图片转base64
function readFile(el) {
var file = el.files[0];
if (!/image\/\w+/.test(file.type)) {
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(this.result)
}
}
}
</script>
</html>
网友评论