Question

我是新来的，对任何异常都道歉，我给的任务是在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]);
        }

    }

我最坚定认为这应该有用，但不是，任何修复或新方法都会受到高度赞赏

提前致谢。

Answer 1

感谢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);

如果有任何问题，请指出此代码中的任何弱点谢谢

Answer 2

Here是可以帮助您的东西，允许您绕过Java的使用并改为使用裸HTML。

我也希望它不会侮辱你指出，我不确定是否可以预览＆＃34;预览＆＃34;一首歌，你可能必须主持缩短版本的歌曲作为预览长度，让你的剧本播放，而不是让代码自动截断它们。

发布之前预览音频文件

2 个答案: