input選擇視訊或圖片本地預覽問題
阿新 • • 發佈:2018-12-31
圖片目前可以用兩個方法,示例是vue程式碼,原生用的話需要小改下
預覽圖片 1
<input id="filepicker" @change="chooseImgInput" type="file" class="upload_icon"> <img :src="imgUrl" src=""> chooseImgInput(event) { //選擇圖片載入到圖片裁剪工具裡 var that = this; var files = document.getElementById("filepicker").files[0]; this.fileName = files.name; var reader = new FileReader(); reader.readAsDataURL(files); reader.onload = function(e) { that.visible = true; that.imgUrl = this.result; } },
預覽圖片 2
<input id="filepicker" @change="chooseImgInput" type="file" class="upload_icon"> <img :src="imgUrl" src=""> chooseImgInput(event) { var files = document.getElementById("filepicker").files[0]; var url = URL.createObjectURL(files); this.imgUrl = url; },
預覽視訊
<input type="file" id="filepicker" accept="video/mp4" @change="chooseVideoInput" class="uploadVideo_input"> <video id="video" poster="封面圖路徑" :src="video_url" :controls="controls" x5-playsinline="" playsinline="" webkit-playsinline preload="auto"></video> chooseVideoInput(event) { var files = document.getElementById("filepicker").files[0]; var url = URL.createObjectURL(files); this.video_url= url; }, :controls="controls" x5-playsinline="" playsinline="" webkit-playsinline preload="auto" //這幾個屬性是解決原生視訊video標籤在ios手機上自動去安平播放的問題,controls是是否顯示控制欄