直播app开发时，php—阿里云—云存储OSS功能介绍

在直播app中通常会上传一些文件，有些需要显示进度条，毕竟云存储部分的使用是需要在直播app开发时就要完成的。那么本文来介绍下利用jquery/ajax/php完成文件上传显示进度条的功能，简单易学。
1、Html
第一步先创建个HTML文件，把对应标签放入form表单中，以下为部分代码：样式可根据需求自行调整；

<div >
<form >
	<input type="file" name="file" id="file">
	<button type="button" class="submit">上传</button>
</form>
<span class="processBar"></span>
<span class="processcount">未选择文件</span>
</div>

2、JS

1).引用jquery.js
2).ajax提交上传，把formdata提交到upload.php,部分代码如下：
function upload(){
		var file = document.getElementById('file').files[0];
		var form = new FormData();
		form.append('myfile',file);
		$.ajax({
			url: 'upload.php',
			async: true,
			type: 'post',
			data: form,
			processData: false,
 			contentType: false,
 			xhr:function(){                        
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener('progress',function(e){                            
                        var loaded = e.loaded;
                        var total = e.total;
                        var percent = Math.floor(100*loaded/total);
                        $(".processcount").text(percent+"%");       
                        $(".processBar").css("width",percent+"px");                                                                
                    }, false);
                }
                return myXhr;
            },
 			success: function(data){
 				alert('上传成功');
 			}
		})
	}

3、upload.php处理上传，下面贴出部分代码

<?php  
if(isset($_FILES["myfile"])){  
    move_uploaded_file($_FILES["myfile"]["tmp_name"],"upload/".$_FILES["myfile"]["name"]);
    echo "upload/".$_FILES["myfile"]["name"];
}else{
    echo 'no file';
}
 ?>

以上，整合调整即可实现PHP上传文件显示进度条效果。如果想要了解更多直播app开发时相关内容，可继续关注。
声明：本文由作者原创，转载请注明出处及原文链接。