• 效果圖如下 :
  

• 其實拿電視劇來舉例子更合適,比如要添加一個電視劇,而這部電視劇有很多集,而如果視頻格式是m3u8格式的話,就和我的一樣了,就需要同時選中很多個文件,這個時候就需要用到這樣類似的功能了

• 代碼如下 :

<style> .line {width: 80%;height: 1px;border-top: solid RGB(85, 175, 230) 1px;margin: 0 auto; } </style><form enctype="multipart/form-data"><div class="class"><div class="form-group col-md-12 col-xs-12"><label class="col-md-3 col-xs-12">請輸入課程名稱</label><div class="col-md-9 col-xs-12"><input type="text" id="addClassName" class="form-control"name="addClassName[]"></div></div><div class="form-group col-md-12 col-xs-12"><label class="col-md-3 col-xs-12">請選擇視頻</label><div class="col-md-9 col-xs-12"><input onchange="selectVideos(this)" type="file" id="uploadVideos" name="file[]" multiple></div></div><div class="form-group col-md-12 col-xs-12"><label class="col-md-3 col-xs-12">請輸入第幾節：</label><div class="col-md-9 col-xs-12"><input type="text" class="form-control" name="sort[]"placeholder="第1節就輸入1"required value=""></div></div><div class="form-group col-md-12 col-xs-12"><div class="line"></div></div></div><div class="modal-footer" style="border-top:transparent;"><button type="button" class="btn btn-info" onclick="addVideos()" style="margin-right: 700px">添加視頻</button><button type="button" onclick="addSubmit()" class="btn btn-primary">確認提交</button><button type="button" class="btn btn-default" data-dismiss="modal">取消</button></div> </form><script>var fileCountList = [];// 添加視頻按鈕function addVideos() {let addDom = "<div class='form-group col-md-12 col-xs-12'><label class='col-md-3 col-xs-12'>請輸入課程名稱</label><div class='col-md-9 col-xs-12'><input type='text' class='form-control' name='addClassName[]'> </div></div><div class='form-group col-md-12 col-xs-12'><label class='col-md-3 col-xs-12'>請選擇視頻</label><div class='col-md-9 col-xs-12'> <input type='file' name='file[]' multiple οnchange='selectVideos(this)'></div></div> <div class='form-group col-md-12 col-xs-12'><label class='col-md-3 col-xs-12'>請輸入第幾節：</label><div class='col-md-9 col-xs-12'><input type='text' class='form-control' name='sort[]' placeholder='第1節就輸入1' required></div></div><div class='form-group col-md-12 col-xs-12'><div class='line'></div> </div>";$('.class').append(addDom)}// 獲取選擇視頻的個數(因為目前我寫的是上傳m3u8文件,所以需要用這個來告訴后端每一集有多少個ts文件,如果是上傳mp4文件的話,我猜是不用說明這個的,不過我沒有嘗試過)function selectVideos(obj) {let fileCount = obj.files.length;fileCountList.push(fileCount);}// 確認提交按鈕function addSubmit() {// 在使用FormData提交數據的時候,需要用原生的js,不能使用jQuery,如果要使用jQuery獲取的話,需要將jQuery獲取到的對象轉換成原生的DOM節點,具體的可以看我之前的一篇文章// 這個時候如果使用console.log(formData)是看不到數據的,但是不要懷疑,按照下面的操作仍然是可以把數據提交上去的let formData = new FormData(document.getElementById('uploadVideosForm'));// 向formData中添加數據formData.append('fileCountList',fileCountList);$.ajax({url: '上傳視頻的路徑',method: 'post',processData: false,contentType: false,dataType: "json",data: formData,success: function (data) {console.log(data)}})} </script>

總結

以上是生活随笔為你收集整理的前端实现多视频上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。