使用 PHP Jquery 将音频上传到文件夹
Posted
技术标签:
【中文标题】使用 PHP Jquery 将音频上传到文件夹【英文标题】：Audio Upload to folder using PHP Jquery 【发布时间】：2017-08-11 08:24:43 【问题描述】：大家好。
下面是我的 html。
<!DOCTYPE html>
<html>
<head>
<script src="src/recorder.js"></script>
<script src="src/Fr.voice.js"></script>
<script src="js/jquery.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="center_div">
<span class="recording_label">Please wait...</span>
<span class="loader_bg"></span>
<span class="loader_bg1"></span>
<br/>
<audio controls id="audio"></audio>
</div>
<style>
.center_div
width: 500px;
height: 150px;
background-color: #f5f5f5;
border: 1px solid #808080;
position:absolute;
top:50%;
left:50%;
margin-left:-250px;/* half width*/
margin-top:-75px;/* half height*/
padding:25px;
.recording_label
display: block;
text-align: center;
padding: 10px;
font-family: sans-serif;
font-size: 1.1em;
margin-bottom: 25px;
.loader_bg
min-width: 100%;
background: #c5c5c5;
min-height: 20px;
display: block;
.loader_bg1
min-width: 90%;
background: grey;
min-height: 20px;
display: inline-block;
position: relative;
top: -20px;
audio
</style>
</body>
</html>
在上面的代码中，我曾尝试在录制完成处理后录制和预览音频。我想使用 PHP 将该预览音频上传到文件夹中。任何人都可以在 AJAX 部分帮助我如何发送mp3 文件。我已经引用了很多链接，但我无法获得这部分的解决方案。请任何人帮助我。提前致谢。请在此处参考我的工作小提琴。
像这样获取源文件：
<audio controls="" id="audio" src="blob:null/b63e868d-1628-4836-85da-90cf1b5b65c3"></audio>
如何获取此 blob 并将其转换为 mp3 并存储在文件夹中？
【问题讨论】：
audio不是表单输入元素，需要改/加input type=file src = 'blob src'
就像只有我试过但我不能像这样设置输入文件 src
我尝试使用 set attr title 和多种方式设置输入类型值，但我无法使用 src 名称更改“未选择文件”
请回答..任何人
您的问题似乎不清楚..您也想记录吗？如果是，你在这里没有提到..
【参考方案1】：
修改app.js中的代码如下，在ajax调用中设置url
$(function()
var max = 40;
var count = max + 1;
var counter = setInterval(timer, 1000);
function timer()
count = count - 1;
if (count <= 0)
clearInterval(counter);
$(".recording_label").html("Recording...");
$('.loader_bg1').css('min-width':''+(100)+'%')
Fr.voice.record(false, function());
Fr.voice.stopRecordingAfter(40000, function()
//alert("Recording stopped after 40 seconds");
Fr.voice.export(function(url)
$("#audio").attr("src", url);
$("#audio")[0].play();
, "URL");
);
recordingSec(40);
return;
$(".recording_label").html("Recording will begin in " + count + " sec.");
var percent = (count / max ) * 100 ;
$('.loader_bg1').css('min-width':''+(100 - percent)+'%')
);
function uploadAudio()
Fr.voice.exportMP3(function(blob)
var data = new FormData();
data.append('file', blob);
$.ajax(
url: "server.php",
type: 'POST',
data: data,
contentType: false,
processData: false,
success: function(data)
// Sent to Server
);
, "blob");
function recordingSec(sec)
var count = sec + 1;
var counter = setInterval(timer, 1000);
function timer()
count = count - 1;
if (count <= 0)
clearInterval(counter);
$(".recording_label").html("Recording stopped...Playing");
$('.loader_bg1').css('min-width':''+(100)+'%')
//stopRecording();
return;
$(".recording_label").html("Recording started [ " + (sec - count) + " / " + sec + " ] sec.");
var percent = (count / sec ) * 100 ;
$('.loader_bg1').css('min-width':''+(100 - percent)+'%')
Refer this Documentation
Check this file for reference
Server.php 示例
<?php
$path = 'audio/';
$location = $path . $_FILES['file']['name'] . ".mp3";
move_uploaded_file($_FILES['file']['tmp_name'], $location);
?>
【讨论】：
我无法获得此参考链接..@karthikeyan 如果单页会有多个录音。那我怎么能做到这一点。@karthikeyan ..我们需要在哪里调用uploadAudio() ..这里是Fr.voice.exportMP3(function(blob )) 这个 blob 将如何取值。 @KavyaShree 录制音频调用uploadAudio()后，参考ajax部分，音频文件将发布到url 是@karthikeyan。我只是这样尝试过。但它没有上传到文件夹中。如果我尝试点击链接它的显示站点无法到达错误 @KavyaShree 参考示例不包含任何服务器端脚本，您必须编写一个 php 代码将文件保存在服务器中以上是关于使用 PHP Jquery 将音频上传到文件夹的主要内容，如果未能解决你的问题，请参考以下文章
使用 HTML5 和/或 jQuery 将文件上传到 WCF 服务
Android 允许将多个文件（最大 150 MB）上传到 PHP 服务器