获取HTML 5音频控制文件位置并更新src而不使用id选择器

Question

我想获取Javascript警报中显示的文件位置，但不使用id选择器，然后更新相应的src属性。我已经尝试了所有类型的Jquery选择器，但我似乎无法使语法正确。表单上可能有无限量的音频控件而不仅仅是3，这就是为什么我不想通过id精确定位文件位置的原因。

function uploadAudioFile(that) {

  // would like to get the file info shown in the alert below after a user upload an MP3 and selects the "Upload Audio File" button but without using an id tag.    
  
  var audio_file = $(that).parent().next("audio");
  alert(audio_file);
  var val = audio_file.val();
  alert(val);
 //to select source you can use .find(), to update source .attr()

 var source = audio_file.find("source").attr("src", "updatedsong.mp3") //phony song for demo purposes
 alert(source);

  // would also like to know the jquery for updating the src attribute
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">

  <div class="media">

    <div class="panel-heading">
      <label></label>
    </div>

    <div class="form-inline">
      <label>Artist</label>
      <input name="album" class="form-control" size="64" type="text" value="" />

      <h3 class="customize-heading"></h3>

      <div class="form-group-audio">

        <div class="audio-controls">

          <label for="audiofile" class="tooltiper" title="NA">Upload audio File</label>
          <input id="audiofile" class="audiofile" accept=".mp3,.wav" name="audiofile" type="file" value="" />
          <span class="input-group-btn">
							<input type="button" onclick="uploadAudioFile(this);" class="btn btn-info" name="audio_search"  value="Upload Audio File" />
						</span>
          <audio id="mplayer" class="player" controls="controls" preload="metadata">
            <source src="song1.mp3" />
          </audio>
        </div>
      </div>

    </div>

    <label>Song</label>

    <div class="form-inline">
      <input name="song" class="form-control" type="text" value="" />
    </div>


    <br>
    <br>
    <br>
    <label>Artist</label>
    <input name="album" class="form-control" size="64" type="text" value="" />

    <h3 class="customize-heading"></h3>

    <div class="form-group-audio">

      <div class="audio-controls">

        <label for="audiofile" class="tooltiper" title="NA">Upload audio File</label>
        <input id="audiofile" class="audiofile" accept=".mp3,.wav" name="audiofile" type="file" value="" />
        <span class="input-group-btn">
							<input type="button" onclick="uploadAudioFile(this);" class="btn btn-info" name="audio_search"  value="Upload Audio File" />
						</span>
        <audio id="mplayer" class="player" controls="controls" preload="metadata">
          <source src="song2.mp3" />
        </audio>
      </div>
    </div>

  </div>

  <label>Song</label>

  <div class="form-inline">
    <input name="song" class="form-control" type="text" value="" />
  </div>


  <br>
  <br>
  <br>
  <label>Artist</label>
  <input name="album" class="form-control" size="64" type="text" value="" />

  <h3 class="customize-heading"></h3>

  <div class="form-group-audio">

    <div class="audio-controls">

      <label for="audiofile" class="tooltiper" title="NA">Upload audio File</label>
      <input id="audiofile" class="audiofile" accept=".mp3,.wav" name="audiofile" type="file" value="" />
      <span class="input-group-btn">
							<input type="button" onclick="uploadAudioFile(this);" class="btn btn-info" name="audio_search"  value="Upload Audio File" />
						</span>
      <audio id="mplayer" class="player" controls="controls" preload="metadata">
        <source src="song3.mp3" />
      </audio>
    </div>
  </div>

</div>

<label>Song</label>

<div class="form-inline">
  <input name="song" class="form-control" type="text" value="" />
</div>

Answer 1

修改，更新

在id内没有初步注意到重复的document。在id替换了"audiofile" "mplayer" className个html。

替换.click()代替onclick元素的内联事件属性.btn.btn-info，在event.preventDefault()内使用event.stopPropagation()，uploadAudioFile();使用oncanplaythrough元素为.on()元素添加<audio>事件侦听器，将<source>元素替换为src元素audio元素change元素<input type="file">元素的事件。

在click .btn.btn-info元素的click()上，在input type="file"元素上调用Open File，input type="button"对话框会在点击alert()元素时显示。

使用已上传的File.name，File.type致电URL.createObjectURL()。

使用所选File对象上的blob:转换为$(this).sliblings("audio")功能handleFile内的<audio>选择器，该<input type="file">功能引用src兄弟audio元素的objectURL，将oncanplaythrough元素的.play()设置为DOM，这应该调用<audio>处理程序，在<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(function() { $("audio").on("canplaythrough", function(event) { this.play(); }); function handleFile(e) { var file = e.target.files[0]; var src = URL.createObjectURL(file); // would like to get the file info shown in the alert below alert("name:" + file.name + " type:" + file.type); $(this).siblings("audio") // would also like to know the jquery for updating the src attribute .attr("src", src) } function uploadAudioFile(e) { // after a user upload an MP3 and selects the // "Upload Audio File" button but without using an id tag. e.preventDefault(); e.stopPropagation(); $(this).parent().siblings(":file").click(); } $(".btn.btn-info").click(uploadAudioFile); $(":file").change(handleFile) }) </script> 上调用<span class="input-group-btn"> <input type="button" class="btn btn-info" name="audio_search" value="Upload Audio File" /> </span> <audio id="mplayer" class="player" controls="controls" preload="metadata"> <!-- <source src="" /> --> .parent()元素播放上传的音频文件。

的javascript

.next()

HTML

var audio_file = $(that).parent().next("audio");
var val = audio_file.val()

您应该可以使用source，.find()

source

选择.attr()您可以使用var source = audio_file.find("source").attr("src", /* new source */) 来更新<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(function() { $("audio").on("canplaythrough", function(event) { this.play(); }); function handleFile(e) { var file = e.target.files[0]; var src = URL.createObjectURL(file); // would like to get the file info shown in the alert below alert("name:" + file.name + " type:" + file.type); $(this).siblings("audio") // would also like to know the jquery for updating the src attribute .attr("src", src) } function uploadAudioFile(e) { // after a user upload an MP3 and selects the // "Upload Audio File" button but without using an id tag. e.preventDefault(); e.stopPropagation(); $(this).parent().siblings(":file").click(); } $(".btn.btn-info").click(uploadAudioFile); $(":file").change(handleFile) }) </script> <div class="form-group"> <div class="media"> <div class="panel-heading"> <label></label> </div> <div class="form-inline"> <label>Artist</label> <input name="album" class="form-control" size="64" type="text" value="" /> <h3 class="customize-heading"></h3> <div class="form-group-audio"> <div class="audio-controls"> <label for="audiofile" class="tooltiper" title="NA">Upload audio File</label> <input class="audiofile" class="audiofile" accept=".mp3,.wav" name="audiofile" type="file" value="" /> <span class="input-group-btn"> <input type="button" class="btn btn-info" name="audio_search" value="Upload Audio File" /> </span> <audio class="mplayer" class="player" controls="controls" preload="metadata"> <!-- <source src="" /> --> </audio> </div> </div> </div> <label>Song</label> <div class="form-inline"> <input name="song" class="form-control" type="text" value="" /> </div> <br> <br> <br> <label>Artist</label> <input name="album" class="form-control" size="64" type="text" value="" /> <h3 class="customize-heading"></h3> <div class="form-group-audio"> <div class="audio-controls"> <label for="audiofile" class="tooltiper" title="NA">Upload audio File</label> <input class="audiofile" class="audiofile" accept=".mp3,.wav" name="audiofile" type="file" value="" /> <span class="input-group-btn"> <input type="button" class="btn btn-info" name="audio_search" value="Upload Audio File" /> </span> <audio class="mplayer" class="player" controls="controls" preload="metadata"> <!-- <source src="" /> --> </audio> </div> </div> <label>Song</label> <div class="form-inline"> <input name="song" class="form-control" type="text" value="" /> </div> <br> <br> <br> <label>Artist</label> <input name="album" class="form-control" size="64" type="text" value="" /> <h3 class="customize-heading"></h3> <div class="form-group-audio"> <div class="audio-controls"> <label for="audiofile" class="tooltiper" title="NA">Upload audio File</label> <input class="audiofile" class="audiofile" accept=".mp3,.wav" name="audiofile" type="file" value="" /> <span class="input-group-btn"> <input type="button" class="btn btn-info" name="audio_search" value="Upload Audio File" /> </span> <audio class="mplayer" class="player" controls="controls" preload="metadata"> <!-- <source src="" /> --> </audio> </div> </div> </div> <label>Song</label> <div class="form-inline"> <input name="song" class="form-control" type="text" value="" /> </div> File.txt/directory/directory/Main.java

/* Dropdown menu background color*/

.navbar-nav > li > .dropdown-menu {     background-color: #e7e7e7;  }

/* Dropdown menu font color*/ 

 .navbar-nav > li > .dropdown-menu a{   color: #555555;  }

<script>
var base_url = "<?php echo base_url();?>";
$(document).ready(function() {
    $("#field_6").change(function() {
        $('#description').html($(this).val());
        $('#image').attr("src", base_url + "img/" + $(this).val());
    }).change();
});
</script>