利用javascript怎么實現(xiàn)一個視頻上傳功能-創(chuàng)新互聯(lián)

這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)利用javascript怎么實現(xiàn)一個視頻上傳功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站制作、成都網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元沭陽做網(wǎng)站,已為上家服務(wù),為沭陽各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

效果圖如下：

其實拿電視劇來舉例子更合適，比如要添加一個電視劇，而這部電視劇有很多集，而如果視頻格式是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">請輸入第幾節(jié)：</label>
 <div class="col-md-9 col-xs-12">
  <input type="text" class="form-control" name="sort[]"
   placeholder="第1節(jié)就輸入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" >
 <button type="button" class="btn btn-info" onclick="addVideos()" >添加視頻
 </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'>請輸入第幾節(jié)：</label><div class='col-md-9 col-xs-12'><input type='text' class='form-control' name='sort[]' placeholder='第1節(jié)就輸入1' required></div></div><div class='form-group col-md-12 col-xs-12'><div class='line'></div> </div>";
 $('.class').append(addDom)
 }
 // 獲取選擇視頻的個數(shù)(因為目前我寫的是上傳m3u8文件,所以需要用這個來告訴后端每一集有多少個ts文件,如果是上傳mp4文件的話,我猜是不用說明這個的,不過我沒有嘗試過)
 function selectVideos(obj) {
 let fileCount = obj.files.length;
 fileCountList.push(fileCount);
 }
 // 確認提交按鈕
 function addSubmit() {
 // 在使用FormData提交數(shù)據(jù)的時候,需要用原生的js,不能使用jQuery,如果要使用jQuery獲取的話,需要將jQuery獲取到的對象轉(zhuǎn)換成原生的DOM節(jié)點,具體的可以看我之前的一篇文章
 // 這個時候如果使用console.log(formData)是看不到數(shù)據(jù)的,但是不要懷疑,按照下面的操作仍然是可以把數(shù)據(jù)提交上去的
 let formData = new FormData(document.getElementById('uploadVideosForm'));
 // 向formData中添加數(shù)據(jù)
 formData.append('fileCountList',fileCountList);
 $.ajax({
  url: '上傳視頻的路徑',
  method: 'post',
  processData: false,
  contentType: false,
  dataType: "json",
  data: formData,
  success: function (data) {
 console.log(data)
  }
 })
 }
</script>

上述就是小編為大家分享的利用javascript怎么實現(xiàn)一個視頻上傳功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：利用javascript怎么實現(xiàn)一個視頻上傳功能-創(chuàng)新互聯(lián)
文章鏈接：http://muchs.cn/article16/hsegg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站排名、定制開發(fā)、關(guān)鍵詞優(yōu)化、Google、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)