相機(jī)拆讯，相冊，錄像，點(diǎn)擊替換

<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">
        請輸入標(biāo)題
    </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="相機(jī)" 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]  //標(biāo)題

    // 獲取焦點(diǎn)
    page_text.onfocus = function () {
        this.innerHTML = ''
        this.onfocus = null
    }
    page_title.onfocus = function () {
        this.innerHTML = ''
        this.onfocus = null
    }

    // 點(diǎn)擊相冊展示圖片
    album.onchange = function () {
        page_text.focus()
        page_text.onfocus = function () {
            ImagePath = window.URL.createObjectURL(album.files[0]);
            document.execCommand('InsertImage', false, ImagePath);
            // 結(jié)果 base64
            readFile(album)
        }
    }

    // 點(diǎn)擊錄音展示音頻
    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>');
        }
    }

    // 點(diǎn)擊錄像展示音頻
    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>");

        }
    }
    


    // 圖片轉(zhuǎn)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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末潘飘，一起剝皮案震驚了整個(gè)濱河市掉缺，隨后出現(xiàn)的幾起案子戈擒，更是在濱河造成了極大的恐慌，老刑警劉巖搜囱，帶你破解...
    沈念sama閱讀 218,284評論 6贊 506
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件柑土，死亡現(xiàn)場離奇詭異，居然都是意外死亡扮宠，警方通過查閱死者的電腦和手機(jī)狐榔，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來收捣，“玉大人被廓，你說我怎么就攤上這事〖蕹耍” “怎么了？”我有些...
    開封第一講書人閱讀 164,614評論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵仓蛆，是天一觀的道長挎春。 經(jīng)常有香客問我，道長直奋，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,671評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任搁胆，我火速辦了婚禮，結(jié)果婚禮上攀例，老公的妹妹穿的比我還像新娘顾腊。我一直安慰自己，他們只是感情好杂靶，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,699評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布伪煤。 她就那樣靜靜地躺著，像睡著了一般抱既。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蚀之，一...
    開封第一講書人閱讀 51,562評論 1贊 305
  • 城市分裂傳說
    那天捷泞，我揣著相機(jī)與錄音，去河邊找鬼锁右。 笑死，一個(gè)胖子當(dāng)著我的面吹牛拂到，可吹牛的內(nèi)容都是我干的码泞。 我是一名探鬼主播，決...
    沈念sama閱讀 40,309評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼领铐，長吁一口氣：“原來是場噩夢啊……” “哼宋舷！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起祝蝠，我...
    開封第一講書人閱讀 39,223評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎改艇，沒想到半個(gè)月后坟岔，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,668評論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡承疲，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,859評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年鸥咖，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片啊研。...
    茶點(diǎn)故事閱讀 39,981評論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡鸥拧，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出沟娱，到底是詐尸還是另有隱情腕柜，我是刑警寧澤济似，帶...
    沈念sama閱讀 35,705評論 5贊 347
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布砰蠢，位于F島的核電站蛾找，受9級特大地震影響娩脾，放射性物質(zhì)發(fā)生泄漏打毛。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,310評論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一碰声、第九天 我趴在偏房一處隱蔽的房頂上張望熬甫。 院中可真熱鬧，春花似錦瞻颂、人聲如沸豺谈。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0贊 22
  • 一樁弒父案盖矫，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽丽惭。三九已至辈双，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間换衬，已是汗流浹背喜爷。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留檩帐，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,146評論 3贊 370
  • 代替公主和親
    正文 我出身青樓诅挑，卻偏偏與公主長得像泛源，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子达箍，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,933評論 2贊 355

推薦閱讀更多精彩內(nèi)容