我是新来的,对任何异常表示歉意,我得到的任务是在 POST 之前创建一个带有预览的图像/音频文件上传或链接页面。
不知道我迟到了多久,但刚刚发现了 Html5 音频标签,我想知道如何在上传前预览选择的音频文件。
这是我的上传表格:
<form id="attach" action="imageUpload.php" method="POST" enctype="multipart/form-data" >
<h2>Select An Audio File to Upload</h2>
<br>
<div>
<input type='file' id="files" name="files" multiple onchange="previewAudio(this);" />
<br>
<br>
<output id="list"></output>
<ul>
<li>
<label for="caption">Caption</label>
<input type="text" maxlength="30" name="caption" id="caption" />
</li>
<li>
<textarea id="desc" name="desc" rows="4" cols="32">Description
</textarea>
</li>
</ul>
<audio controls>
<source id="test3" src="" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<input type="submit" value="Upload"/>
</div>
</form>
这是我一直在尝试让它预览的代码:
function previewAudio(input)
{
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#test3').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
我坚信这应该有效,但它不是,任何修复或新方法都将受到高度赞赏
提前致谢。