iT邦幫忙

0

上傳照片或影片如果要預覽功能,能怎麼結合?(同一個 input)

這個是圖片時的預覽圖

$('input[type=file]').change(function() {
   var input = $(this);
   if(!!this.files && !!this.files[0]) {
     var reader = new FileReader();
   reader.onload = function(e) {
       $('#pre' + input.prop('id').substr(4,2)).prop('src', e.target.result);
   }
   reader.readAsDataURL(this.files[0]);
 }
});

這是添加影片預覽圖

$(document).on("change", ".file_multi_video", function(evt) {
  var $source = $('#video_here');
  $('.video_show').show();
  $source[0].src = URL.createObjectURL(this.files[0]);
  $source.parent()[0].load();
});

只是當初我寫的時候影片上傳和照片上傳是分開的:

<input type="file" name="video" class="file_multi_video upload_cover" accept="video/*">
              <video autoplay muted class="video_show displayNone">
                <source src="<?=$editBlog['video'];?>" id="video_here">
              </video>
              ```
所以會有兩個上傳 input
只是我現在都寫在同一個
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答