如何在多个文件上传器中启用提交按钮，直到出现条件? [英] How to enable submit button until condition in a multiple file uploader?
问题描述
我正在做一个WebApp，在那里人们将上传2张图像，我需要通过python代码来传递这些图像.因此，我只想让他们在上传2张图像后发送.
I'm doing a WebApp where people will upload 2 images which I need to pass through a python code. For this reason, I only want to let them send it when 2 images are uploaded.
我一直在阅读其他帖子，例如:
I've been reading other posts like:
但是我无法将其推断为我的情况:
But I'm not able to extrapolate it to my case:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/file-upload-with-preview@3.4.3/dist/file-upload-with-preview.min.css">
</head>
<body>
<!-- Uploader -->
<div class="custom-file-container" data-upload-id="myImage">
<label>Upload your images <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">×</a></label>
<label class="custom-file-container__custom-file" >
<form id="upload-form" action="{{url_for('upload')}}" method="POST" enctype="multipart/form-data">
<input type="file" class="custom-file-container__custom-file__custom-file-input" accept="image/*" aria-label="Choose File" multiple>
<input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
<span class="custom-file-container__custom-file__custom-file-control"></span>
</label>
<div class="custom-file-container__image-preview"></div>
</div>
<input type="submit" name="send" disabled/>
</div>
<script src="https://unpkg.com/file-upload-with-preview@3.4.3/dist/file-upload-with-preview.min.js"></script>
<script>
var upload = new FileUploadWithPreview('myImage', {showDeleteButtonOnImages: true, text: {chooseFile: 'Nom del fitxer', browse: 'Examina'}})
</script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(
function(){
$('input:file').change(
function(){
if ($(this).val()) {
$('input:submit').attr('disabled',false);;
}
}
);
});
</script>
</body>
</html>
最后添加的脚本是第一个链接中给出的解决方案，它可以正常运行，但不是我想要的.
The last script added is the solution given in the first link, which works properly but is not what I want.
文件上传器代码来自 https://github.com/promosis/带有预览的文件上传，在这里我发现有一个名为selectedFilesCount的方法可能很有用.
The file-uploader code is from https://github.com/promosis/file-upload-with-preview, where I've seen that there is a method called selectedFilesCount that maybe is useful.
感谢您的时间，如果您发现我的代码中有些废话，对不起，但是我是这些语言的新手...
Thank you for your time and sorry if you see some nonsense in my code but I'm new with these languages...
推荐答案
您可以从上传对象中插入 upload.cachedFileArray 来检查 array 长度以进行验证如果已选择2个文件进行上传.这可以通过 window事件监听器 fileUploadWithPreview:imageSelected 和 fileUploadWithPreview:imageDelete 绑定的toggle()函数进行检查.被选中后被删除，您仍然可以执行规则2:
You can hook into the upload.cachedFileArray from the upload object to check the array length to verify if 2 files have been selected for upload. This is checked via a toggle() function that is bound by the window event listeners fileUploadWithPreview:imageSelected and fileUploadWithPreview:imageDelete, so if an image is removed after being selected, you can still enforce the rule of 2:
$(document).ready(function() {
});
var toggle = function() {
//console.log(upload.cachedFileArray.length);
if (upload.cachedFileArray.length == 2) {
$('input:submit').attr('disabled', false);
} else {
$('input:submit').attr('disabled', true);
}
};
window.addEventListener('fileUploadWithPreview:imageSelected', function(e) {
// optionally you could pass the length into the toggle function as a param
// console.log(e.detail.cachedFileArray.length);
toggle();
});
window.addEventListener('fileUploadWithPreview:imageDeleted', function(e) {
// optionally you could pass the length into the toggle function as a param
// console.log(e.detail.cachedFileArray.length);
toggle();
});<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/file-upload-with-preview@3.4.3/dist/file-upload-with-preview.min.css">
</head>
<body>
<!-- Uploader -->
<div class="custom-file-container" data-upload-id="myImage">
<label>Upload your images <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">×</a></label>
<label class="custom-file-container__custom-file">
<form id="upload-form" action="{{url_for('upload')}}" method="POST" enctype="multipart/form-data">
<input type="file" class="custom-file-container__custom-file__custom-file-input" accept="image/*" aria-label="Choose File" multiple>
<input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
<span class="custom-file-container__custom-file__custom-file-control"></span>
</label>
<div class="custom-file-container__image-preview"></div>
</div>
<input type="submit" name="send" disabled/>
</div>
<script src="https://unpkg.com/file-upload-with-preview@3.4.3/dist/file-upload-with-preview.min.js"></script>
<script>
var upload = new FileUploadWithPreview('myImage', {
showDeleteButtonOnImages: true,
text: {
chooseFile: 'Nom del fitxer',
browse: 'Examina'
}
});
</script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</body>
</html>这篇关于如何在多个文件上传器中启用提交按钮，直到出现条件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
