html+js实现音频上传并能播放（支持多个文件上传）

本文链接：https://blog.csdn.net/qq_22669967/article/details/103510981

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="file" id="fileInput" accept=".mp3, .mkv, .wma" multiple="multiple"/>
		<div id="audio1"></div>
		<button id="upload">上传</button>
	</body>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/audioUpload.js" type="text/javascript"></script>
</html>

需要引入jquery

js代码：

//上传音频
$("#fileInput").change(function(){
    var file = $("#fileInput").get(0).files;
    console.log(file.type);
    for(var i = 0;i<file.length;i++){
        var path = URL.createObjectURL(file[i]);
        var audio = document.createElement('audio');
        audio.src = path;
        audio.controls = true;
        audio.volume = '0.2';
        $('#audio1').append(audio);
    }
});

$("#upload").click(function(){
    var file = $("#fileInput").get(0).files;
    var formData = new FormData();
    for(var i = 0;i<file.length;i++){
        formData.append("recording",file[i]);
    }
    console.log(formData.getAll("recording"));
	//ajax上传至后台
	uploadAudio(formData);
});

ajax上传后台的先不写了

界面：
在这里插入图片描述

附Ajax上传代码：
function uploadAudio(data){
    $.ajax({
        type:"post",
        contentType:false,
        processData:false,
        async:true,        //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: "你要请求的后台地址",  //请求发送到TestServlet处
        data:data,
        dataType:"json",      //返回数据形式为json
        success:function(result){
            uploadAudioEnd(true, result);
        },
        error:function(errorMsg){
            uploadAudioEnd(false, "");
        }
    });
}


//录音上传返回结果
function uploadAudioEnd(flg,result){
    if(flg){
        if (result && result.retcode == SUCCESS) {
            var res = result.response;
            //对返回结果的处理
        }else{
            alertDialog(result.retmsg);
        }
    }else{
        alertDialog("录音上传失败！");
    }
}