javascript 如何限制使用多个文件输入时选择的最大文件数

o7jaxewo  于 2023-05-21  发布在  Java
关注(0)|答案(9)|浏览(300)

使用<input type="file" multiple>时,用户可以选择多个文件。
如何设置可以选择多少个文件的限制,例如两个?

6qfn3psc

6qfn3psc1#

你可以运行一些jQuery客户端验证来检查:

$(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");
        }
    });    
});​

http://jsfiddle.net/Curt/u4NuH/
但请记住,也要检查服务器端,因为客户端验证可以很容易地绕过。

qco9c6ql

qco9c6ql2#

更改输入轨道时选择的文件数量:

$("#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" >
tvmytwxo

tvmytwxo3#

如果文件数量大于max_file_number,这应该可以工作并保护表单不被提交。

$(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);
    }
  });
});
uhry853o

uhry853o4#

另一种可能的JS解决方案

function onSelect(e) {
    if (e.files.length > 5) {
        alert("Only 5 files accepted.");
        e.preventDefault();
    }
}
mlnl4t2r

mlnl4t2r5#

在javascript中,你可以这样做

<input
  ref="fileInput"
  multiple
  type="file"
  style="display: none"
  @change="trySubmitFile"
>

函数可以是这样的

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]);
  }
}

我也在寻找一个解决方案,在选择文件时可以限制,但直到现在我还找不到这样的东西。

tzxcd3kk

tzxcd3kk6#

您还应该考虑使用库来实现这一点:它们允许限制和更多:

  • FineUploader。从5.16.2开始使用validation.itemLimit的演示:
var restrictedUploader = new qq.FineUploader({
    validation: {
        itemLimit: 3,
    }
});
$('#fileuploadbasic').fileupload({
  maxNumberOfFiles: 6
});

它们也可在https://cdnjs.com/上获得

u5i3ibmn

u5i3ibmn7#

这里有一个例子,我通过输入类型文件发送图像。表单是通过表单的onSubmit事件上的axios单独提交的,因此我使用FormData Web API将表单内容作为multipart/form数据发送。
在处理图像计数的情况下,在name等于images的情况下,我们提醒消息并将值设置为空数组。仍然在用户界面上,它将显示选定的图像计数,因此,我们将消息写得很清楚,您的图像不会被发送。
这里是我给文件输入字段的属性,作为JS对象的一部分。因为我正在遍历一个数组来填充输入字段。

{
  name: "images",
  type: "file",
  accept: "image/*",
  multiple: true,
},

下面是处理OnChange和Onsubmit的代码

const handleOnChange = (e) => {
    let { checked, name, value } = e.target;
    if (name === "status") {
      value = checked ? "active" : "inactive";
    }
    if (name === "images") {


      value = [...e.target.files];
      if (value.length > 5) {
        value = [];
        alert("Can select only upto 5 images, your images won't be sent");
      }
    }
    setForm({ ...form, [name]: value });
  };
  const handleOnSubmit = (e) => {
    e.preventDefault();
    console.log(form);

    // set data with formDataApi
    const formData = new FormData();
    for (const key in form) {
      formData.append(key, form[key]);
    }
    dispatch(postProductsAction(formData));
  };
dgjrabp2

dgjrabp28#

使用两个<input type=file>元素,不带multiple属性。

g2ieeal7

g2ieeal79#

如果你想用php你可以计算数组的个数然后做一个if语句

if((int)count($_FILES['i_dont_know_whats_coming_next'] > 2)
      echo "error message";

相关问题