1.我有一个表下面有2行,但它可以用一个按钮(添加另一个Word媒体)和只有一个提交按钮的所有行:
<tbody>
<tr class="form-row dynamic-medias" id="medias-0">
<td class="field-path_to_file">
<div id="medias-0-path_to_file_with_media_recorder">
<div class="py-2">
<input type="file" name="medias-0-path_to_file" class="bg-slate-100 p-2"
id="id_medias-0-path_to_file">
</div>
<p>
Or record an audio
</p>
<div class="btn-group" role="group">
<button id="medias-0-path_to_file_record_start" type="button"
class="px-2 py-1 text-white bg-green-500 disabled:bg-gray-500 rounded-sm"
onclick="startRecording(this)">
Record
</button>
<button id="medias-0-path_to_file_record_stop" type="button"
class="px-2 py-1 text-white bg-red-500 disabled:bg-gray-500 disabled:text-gray-200 rounded-sm"
onclick="stopRecording(this)" disabled="">
Stop
</button>
</div>
<div class="recording" id="medias-0-path_to_file-record-status">
<span class="text-sm">
Click the "Start Recording" button to start recording
</span>
</div>
</div>
<audio controls="" src="blob:http://localhost:8000/79977bf5-155b-4ca1-b5bc-097b8a55a80a"></audio><a
download="Recorded-Media"
href="blob:http://localhost:8000/79977bf5-155b-4ca1-b5bc-097b8a55a80a">Download it!</a>
</td>
</tr>
<tr class="form-row dynamic-medias" id="medias-1">
<td class="field-path_to_file">
<div id="medias-1-path_to_file_with_media_recorder">
<div class="py-2">
<input type="file" name="medias-1-path_to_file" class="bg-slate-100 p-2"
id="id_medias-1-path_to_file">
</div>
<p>
Or record an audio
</p>
<div class="btn-group" role="group">
<button id="medias-1-path_to_file_record_start" type="button"
class="px-2 py-1 text-white bg-green-500 disabled:bg-gray-500 rounded-sm"
onclick="startRecording(this)">
Record
</button>
<button id="medias-1-path_to_file_record_stop" type="button"
class="px-2 py-1 text-white bg-red-500 disabled:bg-gray-500 disabled:text-gray-200 rounded-sm"
onclick="stopRecording(this)" disabled="">
Stop
</button>
</div>
<div class="recording" id="medias-1-path_to_file-record-status">
<span class="text-sm">
Click the "Start Recording" button to start recording
</span>
</div>
</div>
<audio controls="" src="blob:http://localhost:8000/cd165412-b186-4a11-8fd7-6997750b9bd3"></audio><a
download="Recorded-Media"
href="blob:http://localhost:8000/cd165412-b186-4a11-8fd7-6997750b9bd3">Download it!</a>
</td>
</tr>
<tr class="add-row">
<td colspan="4"><a href="#">Add another Word media</a></td>
</tr>
</tbody>
1.下面是一个jQuery脚本,它从一个小的音频播放器中获取每一行的录音,并在点击提交按钮时将其移动到input type=“file”字段中。(顺便说一下,这是一个Django管理面板表单)
$( document ).ready(function() {
$('input[type=submit]').click(async function(e) {
let url = $('audio').attr('src')
if(url != undefined){
const fileInput = document.querySelector('input[type="file"]');
let file = await fetch(url)
.then(r => r.blob())
.then(blobFile => new File([blobFile], "user_recording.mp3", { type: "mp3" }))
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
fileInput.files = dataTransfer.files;
}
$('#word_form').submit()
});
});
问题是jQuery脚本只适用于第一行和一行。有人能帮我修改上面的脚本,使其适用于每一行循环(每一行都有自己的音频标签)吗?并且所有行都只有一个提交按钮。对不起,我的英语(这不是我的母语:))
1条答案
按热度按时间j7dteeu81#
感谢Amit Singh和freedomn-m的评论,他们给予了我们一个循环的想法: