Limiter la taille d'un fichier téléchargé (élément d'entrée html)

Question

Je voudrais simplement limiter la taille d'un fichier qu'un utilisateur peut télécharger.

Je pensais que maxlength = 20000 = 20k mais cela ne semble pas fonctionner du tout.

Je fonctionne avec Rails, pas avec PHP, mais je pensais qu'il serait beaucoup plus simple de le faire côté client dans le HTML/CSS, ou en dernier recours en utilisant jQuery. C'est tellement basique qu'il doit y avoir une balise HTML que j'ai oubliée ou que je ne connais pas.

Je cherche à supporter IE7+, Chrome, FF3.6+. Je suppose que je pourrais me contenter de supporter IE8+ si nécessaire.

Merci.

Answer 1

Exemple de fichier vidéo (HTML + Javascript) :

function upload_check()
{
    var upl = document.getElementById("file_id");
    var max = document.getElementById("max_id").value;

    if(upl.files[0].size > max)
    {
       alert("File too big!");
       upl.value = "";
    }
};

<form action="some_script" method="post" enctype="multipart/form-data">
    <input id="max_id" type="hidden" name="MAX_FILE_SIZE" value="250000000" />
    <input onchange="upload_check()" id="file_id" type="file" name="file_name" accept="video/*" />
    <input type="submit" value="Upload"/>
</form>

Answer 2

J'ai créé une solution qui utilise uniquement JavaScript et qui prend en charge plusieurs fichiers :

const input = document.querySelector("input")
const result = document.querySelector("p")

const maximumSize = 10 * 1024 * 1024 // In MegaBytes

input.addEventListener("change", function(e){
    const files = Array.from(this.files)
    const approvedFiles = new Array

    if(!files.length) return result.innerText = "No selected files"

    for(const file of files) if(file.size <= maximumSize) approvedFiles.push(file)

    if(approvedFiles.length) result.innerText = `Approved files: ${approvedFiles.map(file => file.name).join(", ")}`
    else result.innerText = "No approved files"
})

<input type="file" multiple>
<p>Result</p>

Answer 3

Cette question date d'il y a longtemps, mais elle pourrait peut-être aider quelqu'un qui a des difficultés. Si vous travaillez avec des formulaires, la façon la plus simple de le faire est de créer un fichier nouveau FormData avec votre formulaire. Par exemple :

form.addEventListener("submit", function(e){
  e.preventDefault()

  const fd = new FormData(this)

  for(let key of fd.keys()){

    if(fd.get(key).size >= 2000000){
      return console.log(`This archive ${fd.get(key).name} is bigger than 2MB.`)
    }

    else if(fd.get(key).size < 2000000){
      console.log(`This archive ${fd.get(key).name} is less than 2MB.`)
    }

    else{
      console.log(key, fd.get(key))
    }

  }

  this.reset()
})

Comme vous pouvez le voir, vous pouvez obtenir la taille d'une archive soumise avec un formulaire en tapant ceci :

fd.get(key).size

Le nom du fichier est également accessible :

fd.get(key).name

J'espère que cela vous a été utile !

Answer 4

Un <input type="file"> peut utiliser multiple Ainsi, si vous avez seulement besoin de supprimer certains des fichiers, vous pouvez le faire :

<input id="file-upload" type="file" multiple />

// define max size in bytes
const maxSize = 10000000;

// get element
const el = document.getElementById('file-upload');

// create data transfer
const dt = new DataTransfer();

// add eligible files to data transfer
for (const file of el.files) {
  if (file.size <= maxSize) {
    dt.items.add(f);
  }
}

// update input files
el.files = dt.files;

Dans mon cas, j'utilise React, donc j'ai utilisé un fichier ref .

const refInput = useRef();

<input type="file" multiple ref={refInput} />

// add eligible files to data transfer
for (const file of refInput.current.files) {
  if (file.size <= maxSize) {
    dt.items.add(f);
  }
}

// update input files
refInput.current.files = dt.files;

Answer 5

<script type="text/javascript">
    $(document).ready(function () {

        var uploadField = document.getElementById("file");

        uploadField.onchange = function () {
            if (this.files[0].size > 300000) {
                this.value = "";
                swal({
                    title: 'File is larger than 300 KB !!',
                    text: 'Please Select a file smaller than 300 KB',
                    type: 'error',
                    timer: 4000,
                    onOpen: () => {
                        swal.showLoading()
                        timerInterval = setInterval(() => {
                            swal.getContent().querySelector('strong')
                                .textContent = swal.getTimerLeft()
                        }, 100)
                    },
                    onClose: () => {
                        clearInterval(timerInterval)

                    }
                }).then((result) => {
                    if (
                        // Read more about handling dismissals
                        result.dismiss === swal.DismissReason.timer

                    ) {

                        console.log('I was closed by the timer')
                    }
                });

            };
        };

    });
</script>