我正在做一个WebApp,在那里人们将上传2张图像,我需要通过python代码来传递这些图像。因此,我只想让他们在上传2张图像后发送。
我一直在阅读其他文章,例如:
How to disable submit button until file is selected
Enable submit button after uploading more than 1 file
但是我无法将其推断为我的情况:
<!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>
添加的最后一个脚本是第一个链接中给出的解决方案,它可以正常工作,但不是我想要的。
文件上传器代码来自https://github.com/promosis/file-upload-with-preview,在这里我看到有一个称为selectedFilesCount的方法可能有用。
感谢您的时间,如果您在我的代码中看到一些废话,则感到抱歉,但是我是这些语言的新手...
最佳答案
您可以从上传对象中插入upload.cachedFileArray
以检查array
长度,以验证是否已选择2个文件进行上传。这是通过受window event listeners
fileUploadWithPreview:imageSelected
和fileUploadWithPreview:imageDelete
绑定的toggle()函数检查的,因此,如果在选择图像后将其删除,则仍可以执行规则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>
关于javascript - 如何在多个文件上传器中启用提交按钮直到条件?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55958372/