$(function(){
$("input[type='submit']").click(function(){
var $fileUpload = $("input[type='file']");
if (parseInt($fileUpload.get(0).files.length)>2){
alert("You can only upload a maximum of 2 files");
}
});
});
$("#image").on("change", function() {
if ($("#image")[0].files.length > 2) {
alert("You can select only 2 images");
} else {
$("#imageUploadForm").submit();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<strong>On change of the input track how many files are selected:</strong>
<input name="image[]" id="image" type="file" multiple="multiple" accept="image/jpg, image/jpeg" >
$(function() {
var // Define maximum number of files.
max_file_number = 3,
// Define your form id or class or just tag.
$form = $('form'),
// Define your upload field class or id or tag.
$file_upload = $('#image_upload', $form),
// Define your submit class or id or tag.
$button = $('.submit', $form);
// Disable submit button on page ready.
$button.prop('disabled', 'disabled');
$file_upload.on('change', function () {
var number_of_images = $(this)[0].files.length;
if (number_of_images > max_file_number) {
alert(`You can upload maximum ${max_file_number} files.`);
$(this).val('');
$button.prop('disabled', 'disabled');
} else {
$button.prop('disabled', false);
}
});
});
trySubmitFile(e) {
if (this.disabled) return;
const files = e.target.files || e.dataTransfer.files;
if (files.length > 5) {
alert('You are only allowed to upload a maximum of 2 files at a time');
}
if (!files.length) return;
for (let i = 0; i < Math.min(files.length, 2); i++) {
this.fileCallback(files[i]);
}
}
这里有一个例子,我通过输入类型文件发送图像。表单是通过表单的onSubmit事件上的axios单独提交的,因此我使用FormData Web API将表单内容作为multipart/form数据发送。 在处理图像计数的情况下,在name等于images的情况下,我们提醒消息并将值设置为空数组。仍然在用户界面上,它将显示选定的图像计数,因此,我们将消息写得很清楚,您的图像不会被发送。 这里是我给文件输入字段的属性,作为JS对象的一部分。因为我正在遍历一个数组来填充输入字段。
9条答案
按热度按时间6qfn3psc1#
你可以运行一些jQuery客户端验证来检查:
http://jsfiddle.net/Curt/u4NuH/
但请记住,也要检查服务器端,因为客户端验证可以很容易地绕过。
qco9c6ql2#
更改输入轨道时选择的文件数量:
tvmytwxo3#
如果文件数量大于
max_file_number
,这应该可以工作并保护表单不被提交。uhry853o4#
另一种可能的JS解决方案
mlnl4t2r5#
在javascript中,你可以这样做
函数可以是这样的
我也在寻找一个解决方案,在选择文件时可以限制,但直到现在我还找不到这样的东西。
tzxcd3kk6#
您还应该考虑使用库来实现这一点:它们允许限制和更多:
validation.itemLimit
的演示:maxNumberOfFiles
的jquery file upload restricting number of files:它们也可在https://cdnjs.com/上获得
u5i3ibmn7#
这里有一个例子,我通过输入类型文件发送图像。表单是通过表单的onSubmit事件上的axios单独提交的,因此我使用FormData Web API将表单内容作为multipart/form数据发送。
在处理图像计数的情况下,在name等于images的情况下,我们提醒消息并将值设置为空数组。仍然在用户界面上,它将显示选定的图像计数,因此,我们将消息写得很清楚,您的图像不会被发送。
这里是我给文件输入字段的属性,作为JS对象的一部分。因为我正在遍历一个数组来填充输入字段。
下面是处理OnChange和Onsubmit的代码
dgjrabp28#
使用两个
<input type=file>
元素,不带multiple
属性。g2ieeal79#
如果你想用php你可以计算数组的个数然后做一个if语句