php - 发布前预览音频文件

对于出现任何异常，我很抱歉，我的任务是在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]);
        }

    }

我最坚信这应该可行，但是不行，任何修复或新方法将不胜感激

提前致谢。

最佳答案

感谢JWarner，该链接是一个不错的起点，在我将近5个小时的研究中学到了很多东西，最终在这里找到了解决方案Reading files in JavaScript using the File APIs

这是我的做法:

document.addEventListener('DOMContentLoaded', function(){
 document.getElementById('files').addEventListener('change',  handleFileSelect,false);
    function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  // Loop through the FileList and render image files as thumbnails.
   for (var i = 0, f; f = files[i]; i++) {

  // Only process image files.

  if (f.type.match('image.*')) {
  var reader = new FileReader();
 alert('e.target.result');
  // Closure to capture the file information.
  reader.onload = (function(theFile) {
    return function(e) {
      // Render thumbnail.

      var span = document.createElement('span');

      span.innerHTML = ['<img class="thumb" src="', e.target.result,
                        '" title="', escape(theFile.name), '" width="230"    height="270"/>'].join('');
      document.getElementById('list').insertBefore(span, null);

    };
  })(f);
  }else if (f.type.match('audio.*')){
  var reader = new FileReader();

  // Closure to capture the file information.
  reader.onload = (function(theFile) {
    return function(e) {
      // Render thumbnail.

      var span = document.createElement('span');

    span.innerHTML = ['<audio controls><source src="', e.target.result,'   "type="audio/ogg"><source src="', e.target.result,' "type="audio/mpeg"></audio>'].join('');
      document.getElementById('list').insertBefore(span, null);

    };
  })(f);
}
  // Read in the image file as a data URL.
  reader.readAsDataURL(f);
}
  } }, false);

请指出此代码中的任何弱点
谢谢