为附加的输入单独设置on-change事件的方法是什么

我正试图(通过jQuery(为包含输入的附加html模板设置一个on-change事件。当前：

html

<div class="scroller" id='videoInfoColumn' style="height: 600px; overflow-x: hidden;text-align: left;">
<button id="add-vid-btn">Add</button>
</div>

let count = 0;
let htmlTemplate = `<div><input id="vidUpload" type="file" /></div>`
function f_create_video_loaders(count) {
$(htmlTemplate).appendTo(videoInfoColumn);
let videoInfoColumn = document.getElementById('videoInfoColumn');
let vidUploadInput = document.getElementById('vidUpload');
inputArrays.push(vidUploadInput);
// console.log(inputArrays)

vidUploadInput.setAttribute('id',`vidUpload${count}`)
// on video upload

// here's where I need to run the on change event whenever a video got uploaded to that specific input.
$('#vidUpload').on('change', (e) => {
e.preventDefault();
let files = e.target.files;

videoInfoColumn.lastElementChild.remove()
f_select_files(files);
vidUploadInput.value = ''

// // take off the change event
$('#vidUpload').off('change');
})
}
const addVidBtn = document.getElementById('add-vid-btn');
addVidBtn.addEventListener('click', () => {
count++;
f_create_video_loaders(count)
})

我在尝试时遇到了问题

设置vidUpload输入的唯一id
仅针对特定的vidUpload输入运行onchange事件

我试图设置CCD_ 1，其中CCD_ 2的每次点击计数递增。然后试图想出一些循环，每当输入与视频一起上传时，就会触发on change事件，但我就是想不出正确的逻辑。

目前，由于所有的输入都有相同的id，所以它为每个附加的输入提供了相同的文件。然而，如果我一个接一个地上传一个文件，效果会很好。-附加视频上传-上传视频-附加另一个vidUpload(通过addVidBtn(-上载另一个视频。(这有效，但不是我需要的(

我的目标是

追加x个输入。点击3次，追加输入3次
然后，在每个输入中逐一上传文件，然后提交到后台

谢谢

编辑：当前解决方案：

在你(biberman和其他人(的帮助下，这是我目前的解决方案，看起来效果很好。

function f_create_video_loaders(count) {
// grab the main div to append video information
const videoInfoColumn = document.getElementById('videoInfoColumn');

// create a separate empty div to hold onto video info
let myDiv = document.createElement('div');
myDiv.id = "vidFormContainer_" + count;
// create count_temp arg
let jg_post_item_count_temp = "jg_postitem_" + count;
// concat html template w/ set args to newly created div
myDiv.innerHTML += f_set_html_element_template(count, {name: "no file"}, jg_post_item_count_temp);
// append div into the main videoInfoColumn div of the html
videoInfoColumn.append(myDiv);
// create the input
const vidUploadInput = document.createElement('input');
vidUploadInput.id = 'vidUpload_' + count;
vidUploadInput.setAttribute('type', 'file');
vidUploadInput.setAttribute('accept', 'video/*');
// console.log(vidUploadInput);
// append the input to proper location in the html template
let idArr = vidUploadInput.id.split('_');
let idNum = idArr[1];
let videoSelectorContainer = document.getElementById('append_video_' + idNum);
videoSelectorContainer.append(vidUploadInput)
$('#xitm_publish_from_date_' + count).datepicker({
format: "yyyy/mm/dd",
language: "ja",
autoclose: true,
todayHighlight: true,
startView: 1
});
$('#xitm_publish_to_date_' + count).datepicker({
format: "yyyy/mm/dd",
language: "ja",
autoclose: true,
todayHighlight: true,
startView: 1
});
// handle change
function changeHandler(e) {
e.preventDefault();
let files = e.target.files;
//hide video input
vidUploadInput.style.display = 'none';
// create video player
let source = document.createElement('video');
source.id = ''
source.style.width = '100%';
source.controls = true;
source.src = URL.createObjectURL(files[0])
//append to main video container
videoSelectorContainer.append(source);

// grab id
let idArr = vidUploadInput.id.split('_');
let idNum = idArr[1];
let fileTitle = document.getElementById('xitm_attachment_file_name_' + idNum);
// update file title
fileTitle.value = files[0].name;
let w_count_id = parseInt(f_jg_array_get_max(displaying_video_data_array, "w_count_id")) + 1;
let w_counter = w_count_id;
displaying_video_data_array.push({
name: files[0].name,
class: "jg_postitem_" + count,
upload_name: files[0].name,
w_count_id: w_count_id,
video_id: ""
})
w_video_formData.append('file[]'       , files[0]);
w_video_formData.append('file_name[]'  , files[0].name);
console.log(w_video_formData);
// take off the change event
vidUploadInput.removeEventListener('change', changeHandler)
}

// inputArrays.unshift(vidUploadInput);
vidUploadInput.addEventListener('change', changeHandler);

}

我发现了一些问题：

您不使用varhtmlTemplate
${blankHtmlElement}没有定义-这里应该使用上面的var
在附加元素#vidUpload之前，请尝试选择该元素
未定义inputArrays
您将change侦听器附加到一个id为vidUpload但不存在的元素，因为您通过向该元素添加索引count来覆盖该id-相反，您应该将侦听器添加到实际创建的输入vidUploadInput.setAttribute('id',`vidUpload${count}`)0

如果定义了inputArrays，请使用htmlTemplate进行追加，并在选择#vidUpload之前移动追加，使其按预期工作。

工作示例：

let count = 0;
let inputArrays = [];
let htmlTemplate = `<div><input id="vidUpload" type="file" /></div>`;
function f_create_video_loaders(count) {
let videoInfoColumn = document.getElementById('videoInfoColumn');
$(htmlTemplate).appendTo(videoInfoColumn);
let vidUploadInput = document.getElementById('vidUpload');
inputArrays.push(vidUploadInput);
// console.log(inputArrays);
vidUploadInput.setAttribute('id', `vidUpload${count}`);
// on video upload
// here's where I need to run the on change event whenever a video got uploaded to that specific input.
$(vidUploadInput).on('change', (e) => {
e.preventDefault();
let files = e.target.files;
videoInfoColumn.lastElementChild.remove();

console.log(files);
//f_select_files(files);
vidUploadInput.value = '';
// take off the change event
$(vidUploadInput).off('change');
})
}
const addVidBtn = document.getElementById('add-vid-btn');
addVidBtn.addEventListener('click', () => {
count++;
f_create_video_loaders(count);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroller" id='videoInfoColumn' style="height: 600px; overflow-x: hidden;text-align: left;">
<button id="add-vid-btn">Add</button>
</div>

顺便说一句：你不需要jQuery，只需要使用简单的JavaScript:

let count = 0;
let inputArrays = [];
function f_create_video_loaders(count) {
let videoInfoColumn = document.getElementById('videoInfoColumn');
let container = document.createElement('div');
let vidUploadInput = document.createElement('input');

function changeHandler(e) {
e.preventDefault();
let files = e.target.files;
videoInfoColumn.lastElementChild.remove();

console.log(files);
//f_select_files(files);
vidUploadInput.value = '';
// take off the change event
vidUploadInput.removeEventListener('change', changeHandler)
}

vidUploadInput.type = 'file';
vidUploadInput.id = 'vidUpload' + count;
vidUploadInput.addEventListener('change', changeHandler);

inputArrays.push(vidUploadInput);
container.append(vidUploadInput);
videoInfoColumn.append(container);
}
const addVidBtn = document.getElementById('add-vid-btn');
addVidBtn.addEventListener('click', () => {
count++;
f_create_video_loaders(count);
})

<div class="scroller" id='videoInfoColumn' style="height: 600px; overflow-x: hidden;text-align: left;">
<button id="add-vid-btn">Add</button>
</div>

请将您的元素用作数组，然后只有它才会发布多个文件

vidUploadInput.setAttribute('name', 'vidUpload[]')

vidUploadInput.setAttribute('class', 'vidUpload')

<input id="vidUpload" class="vidUpload" name="vidUpload[]" type="file" />

$(document).on("change",".vidUpload",function(e) {
Your code here });

相关内容

最新更新

热门标签：