這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)利用javascript怎么實(shí)現(xiàn)一個(gè)視頻上傳功能,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
成都創(chuàng)新互聯(lián)成立于2013年,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元沭陽做網(wǎng)站,已為上家服務(wù),為沭陽各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220效果圖如下:
其實(shí)拿電視劇來舉例子更合適,比如要添加一個(gè)電視劇,而這部電視劇有很多集,而如果視頻格式是m3u8格式的話,就和我的一樣了,就需要同時(shí)選中很多個(gè)文件,這個(gè)時(shí)候就需要用到這樣類似的功能了。
代碼如下:
<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">請(qǐng)輸入課程名稱</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">請(qǐng)選擇視頻</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">請(qǐng)輸入第幾節(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">確認(rèn)提交</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'>請(qǐng)輸入課程名稱</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'>請(qǐng)選擇視頻</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'>請(qǐng)輸入第幾節(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) } // 獲取選擇視頻的個(gè)數(shù)(因?yàn)槟壳拔覍懙氖巧蟼鱩3u8文件,所以需要用這個(gè)來告訴后端每一集有多少個(gè)ts文件,如果是上傳mp4文件的話,我猜是不用說明這個(gè)的,不過我沒有嘗試過) function selectVideos(obj) { let fileCount = obj.files.length; fileCountList.push(fileCount); } // 確認(rèn)提交按鈕 function addSubmit() { // 在使用FormData提交數(shù)據(jù)的時(shí)候,需要用原生的js,不能使用jQuery,如果要使用jQuery獲取的話,需要將jQuery獲取到的對(duì)象轉(zhuǎn)換成原生的DOM節(jié)點(diǎn),具體的可以看我之前的一篇文章 // 這個(gè)時(shí)候如果使用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怎么實(shí)現(xiàn)一個(gè)視頻上傳功能了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站欄目:利用javascript怎么實(shí)現(xiàn)一個(gè)視頻上傳功能-創(chuàng)新互聯(lián)
文章鏈接:http://bm7419.com/article16/hsegg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開發(fā)、網(wǎng)站排名、定制開發(fā)、關(guān)鍵詞優(yōu)化、Google、移動(dòng)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容