基于JS實現(xiàn)視頻上傳顯示進(jìn)度條
更新時間：2020年05月12日 08:37:03 作者：指間流逝的夏末
這篇文章主要介紹了基于JS實現(xiàn)視頻上傳顯示進(jìn)度條,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
示例代碼：
css部分：
#content{border: 1px solid saddlebrown;padding: 16px;border-radius: 2px}
.list {top: 15px;width: 140px;height: 40px; border:1px solid #0082E6; display:inline-block;border-radius: 2px;position: relative; line-height: 40px;}
#file{position: absolute;opacity: 0;color:white;width: 100%;height: 100%;z-index: 100;}
.list span{
display: inline-block;
text-align: center;
width: 100%;
line-height: 40px;
position: absolute;
color: #0082E6;
}
video{
margin-top: 8px;
border-radius: 4px;
}
._p{
margin: 14px;
}
._p input{
display: inline-block;
width: 70%;
margin-left: 6px;
}
._p span{
font-size: 15px;
}
html部分
<div id="content" >
<p class="_p"><span>視頻標(biāo)題</span>：<input id="title" type="text" class="form-control" placeholder="請輸入視頻名稱"></p>
<p class="_p">
<span>選擇視頻： </span>
<!--文件選擇按鈕-->
<a class="list" href="javascript:;" rel="external nofollow" >
<input id="file" type="file" name="myfile" onchange="UpladFile();" /><span>選擇視頻</span>
</a>
<!--上傳速度顯示-->
<span id="time"></span>
</p>
<!--顯示消失-->
<ul class="el-upload-list el-upload-list--text" style="display: none;">
<li tabindex="0" class="el-upload-list__item is-success" >
<a class="el-upload-list__item-name">
<i class="el-icon-document"></i><span id="videoName">food.jpeg</span>
</a>
<label class="el-upload-list__item-status-label" >
<i class="el-icon-upload-success el-icon-circle-check" ></i>
</label>
<i class="el-icon-close" onclick="del();"></i>
<i class="el-icon-close-tip"></i>
</li>
</ul>
<!--進(jìn)度條-->
<div class="el-progress el-progress--line" style="display: none;">
<div class="el-progress-bar">
<div class="el-progress-bar__outer" style="height: 6px;">
<div class="el-progress-bar__inner" style="width: 0%;">
</div>
</div>
</div>
<div class="el-progress__text" style="font-size: 14.4px;">0%</div>
</div>
<p class="_p"><span>上傳視頻</span>：<button class="btn btn-primary" type="button" onclick="sub();">上傳</button></p>
<!--預(yù)覽框-->
<div class="preview">
</div>
</div>
js部分：
<script type="text/javascript">
var xhr;//異步請求對象
var ot; //時間
var oloaded;//大小
//上傳文件方法
function UpladFile() {
var fileObj = document.getElementById("file").files[0]; // js 獲取文件對象
if(fileObj.name){
$(".el-upload-list").css("display","block");
$(".el-upload-list li").css("border","1px solid #20a0ff");
$("#videoName").text(fileObj.name);
}else{
alert("請選擇文件");
}
}
/*點擊取消*/
function del(){
$("#file").val('');
$(".el-upload-list").css("display","none");
}
/*點擊提交*/
function sub(){
var fileObj = document.getElementById("file").files[0]; // js 獲取文件對象
if(fileObj==undefined||fileObj==""){
alert("請選擇文件");
return false;
};
var title = $.trim($("#title").val());
if(title==''){
alert("請?zhí)顚懸曨l標(biāo)題");
return false;
}
var url = "{php echo webUrl('goods/iframe.upload')}"; // 接收上傳文件的后臺地址
var form = new FormData(); // FormData 對象
form.append("mf", fileObj); // 文件對象
form.append("title", title); // 標(biāo)題
xhr = new XMLHttpRequest(); // XMLHttpRequest 對象
xhr.open("post", url, true); //post方式，url為服務(wù)器請求地址，true 該參數(shù)規(guī)定請求是否異步處理。
xhr.onload = uploadComplete; //請求完成
xhr.onerror = uploadFailed; //請求失敗
xhr.upload.onprogress = progressFunction; //【上傳進(jìn)度調(diào)用方法實現(xiàn)】
xhr.upload.onloadstart = function() { //上傳開始執(zhí)行方法
ot = new Date().getTime(); //設(shè)置上傳開始時間
oloaded = 0; //設(shè)置上傳開始時，以上傳的文件大小為0
};
xhr.send(form); //開始上傳，發(fā)送form數(shù)據(jù)
}
//上傳進(jìn)度實現(xiàn)方法，上傳過程中會頻繁調(diào)用該方法
function progressFunction(evt) {
// event.total是需要傳輸?shù)目傋止?jié)，event.loaded是已經(jīng)傳輸?shù)淖止?jié)。如果event.lengthComputable不為真，則event.total等于0
if(evt.lengthComputable) {
$(".el-progress--line").css("display","block");
/*進(jìn)度條顯示進(jìn)度*/
$(".el-progress-bar__inner").css("width", Math.round(evt.loaded / evt.total * 100) + "%");
$(".el-progress__text").html(Math.round(evt.loaded / evt.total * 100)+"%");
}
var time = document.getElementById("time");
var nt = new Date().getTime(); //獲取當(dāng)前時間
var pertime = (nt - ot) / 1000; //計算出上次調(diào)用該方法時到現(xiàn)在的時間差，單位為s
ot = new Date().getTime(); //重新賦值時間，用于下次計算
var perload = evt.loaded - oloaded; //計算該分段上傳的文件大小，單位b
oloaded = evt.loaded; //重新賦值已上傳文件大小，用以下次計算
//上傳速度計算
var speed = perload / pertime; //單位b/s
var bspeed = speed;
var units = 'b/s'; //單位名稱
if(speed / 1024 > 1) {
speed = speed / 1024;
units = 'k/s';
}
if(speed / 1024 > 1) {
speed = speed / 1024;
units = 'M/s';
}
speed = speed.toFixed(1);
//剩余時間
var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);
time.innerHTML = '上傳速度：' + speed + units + ',剩余時間：' + resttime + 's';
if(bspeed == 0)
time.innerHTML = '上傳已取消';
}
//上傳成功響應(yīng)
function uploadComplete(evt) {
//服務(wù)斷接收完文件返回的結(jié)果 注意返回的字符串要去掉雙引號
if(evt.target.responseText){
var str = "../shiping/"+evt.target.responseText;
alert("上傳成功！");
$(".preview").append("<video controls='' autoplay='' name='media'><source src="+str+" type='video/mp4'></video>");
}else{
alert("上傳失敗");
}
}
//上傳失敗
function uploadFailed(evt) {
alert("上傳失敗！");
}
</script>
后臺用PHP實現(xiàn)
//視頻上傳
public function upload(){
global $_W;
global $_GPC;
$fileArr = $_FILES['mf'];
$title = $_GPC['title'];
/*var_dump($title);
exit;*/
//設(shè)置預(yù)覽目錄,上傳成功的路徑
$previewPath = "../shiping/";
$ext = pathinfo($fileArr['name'], PATHINFO_EXTENSION);//獲取當(dāng)前上傳文件擴(kuò)展名
$arrExt = array('3gp','rmvb','flv','wmv','avi','mkv','mp4','mp3','wav',);
if(!in_array($ext,$arrExt)) {
exit(json_encode(-1,JSON_UNESCAPED_UNICODE));//視/音頻或采用了不合適的擴(kuò)展名！
} else {
//文件上傳到預(yù)覽目錄
$previewName = 'pre_'.md5(mt_rand(1000,9999)).time().'.'.$ext; //文件重命名
$previewSrc = $previewPath.$previewName;
if(move_uploaded_file($fileArr['tmp_name'],$previewSrc)){//上傳文件操作，上傳失敗的操作
exit($previewName);
} else {
//上傳成功的失敗的操作
exit(json_encode(0,JSON_UNESCAPED_UNICODE));
}
}
}
實現(xiàn)效果：
選擇視頻
上傳中........
上傳完成
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于JavaScript指定斷點操作的相關(guān)資料，文中通過圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09
同樣在HTML5可以通過data-自定義屬性名來給元素添加自定義的屬性名。一旦添加完成之后。通過JS可以獲取以及設(shè)置自定義屬性。這篇文章主要介紹了jQuery中選擇查找自定義屬性具有特定值的所有元素2023-02-02
safari,opera嵌入iframe頁面cookie讀取問題解決方法
最近做的合作網(wǎng)站嵌入到對方的iframe中去，在safari,opera和有些版本的搜狗瀏覽器（內(nèi)核版本原因）中不能讀到cookie。2010-06-06
JS實現(xiàn)1000以內(nèi)被3或5整除的數(shù)字之和
今天在技術(shù)群里看到一道這樣的提：求1000以內(nèi)被3或5整除的數(shù)字之和。小編把我的解決辦法分享到腳本之家平臺，供大家參考2016-02-02
詳談構(gòu)造函數(shù)加括號與不加括號的區(qū)別
下面小編就為大家?guī)硪黄斦剺?gòu)造函數(shù)加括號與不加括號的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了JS+HTML5實現(xiàn)圖片在線預(yù)覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要給大家介紹了關(guān)于微信小程序位置授權(quán)處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了了解Javascript中函數(shù)作為對象的魅力,javascript中函數(shù)可以有屬性，可以有方法， 可以享有所有對象所擁有的特性。并且最重要的，她還可以直接被調(diào)用,需要的朋友可以參考下2019-06-06
下面小編就為大家?guī)硪黄狫S中對象與字符串的互相轉(zhuǎn)換詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
下面小編就為大家?guī)硪黄鷍s封裝二級城市下拉列表的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06