Arrêter le téléchargement de fichier lorsque la taille du fichier est trop grande - jQuery S3

Question

Veuillez cliquer sur l'extrait ci-dessous. J'utilise jQuery fileUpload et un formulaire direct s3 pour télécharger des vidéos sur AWS. Je voudrais qu'il y ait une limite de 5 Mo qui est imposée avant que la vidéo ne frappe un serveur local. Comment puis-je modifier ce code afin que le téléchargement est arrêté complètement et alerte l'utilisateur lorsque la taille du fichier est supérieure à 5 Mo et si elle est inférieure, tout se poursuit comme d'habitude? J'ai ajouté une limite de longueur de contenu de 5 Mo aux options de formulaire S3, donc les téléchargements de plus grande taille sont refusés, mais il serait préférable s'il y avait quelque chose pour informer l'utilisateur qu'un téléchargement est trop grand pour commencer avec .

$ -> 
     $(".direct-upload").each -> 
     form = $(this) 
     $(this).fileupload 
      url: form.attr("action") 
      type: "POST" 
      autoUpload: true 
      dataType: "xml" 
      add: (event, data) -> 
      if data.files[0].size < 5242880 
      $.ajax 
       url: "/signed_urls" 
       type: "GET" 
       dataType: "json" 
       data: 
       doc: 
        title: data.files[0].name 

       async: false 
       success: (data) -> 
       form.find("input[name=key]").val data.key 
       form.find("input[name=policy]").val data.policy 
       form.find("input[name=signature]").val data.signature 

      data.submit() 

      send: (e, data) -> 
      $(".progress, #dropzone").fadeIn() 
      $.each data.files, (index, file) -> 
       $('.well').html("").append("Uploading: " + file.name + '<br>' + "File size: " + (file.size/1000000) + ' MB') 


      progress: (e, data) -> 
      percent = undefined 
      percent = Math.round((e.loaded/e.total) * 100) 
      $(".bar").css "width", percent + "%" 

      fail: (e, data) -> 
      console.log "fail" 

      success: (data) -> 
      url = undefined 
      url = decodeURIComponent($(data).find("Location").text()) 
      $("#video_file").val url 

      done: (event, data) -> 
        $("#new_video").submit() 
        $(".progress").fadeOut 1200, -> 
         $(".bar").css "width", 0 

MISE À JOUR:

Cela fonctionne bien. Le déplacement de l'instruction if avant/signed_url empêche l'envoi d'un fichier trop volumineux au serveur et alerte l'utilisateur.

$ -> 
     $(".direct-upload").each (data) -> 
     form = $(this) 
     $(this).fileupload 
      url: form.attr("action") 
      type: "POST" 
      autoUpload: true 
      dataType: "xml" 
      add: (event, data) -> 
      if data.files[0].size < 5242880 
      $.ajax 
       url: "/signed_urls" 
       type: "GET" 
       dataType: "json" 
       data: 
       doc: 
        title: data.files[0].name 

       async: false 
       success: (data) -> 
       form.find("input[name=key]").val data.key 
       form.find("input[name=policy]").val data.policy 
       form.find("input[name=signature]").val data.signature 

      data.submit() 
      else 
      alert("File too big") 

      send: (e, data) -> 
       $(".progress, #dropzone").fadeIn() 
       $.each data.files, (index, file) -> 
        $('.well').html("").append("Uploading: " + file.name + '<br>' + "File size: " + (Math.round(file.size/1000000)) + ' MB') 


      progress: (e, data) -> 
      percent = undefined 
      percent = Math.round((e.loaded/e.total) * 100) 
      $(".bar").css "width", percent + "%" 

      fail: (e, data) -> 
      console.log "fail" 

      success: (data) -> 
      url = undefined 
      url = decodeURIComponent($(data).find("Location").text()) 
      $("#video_file").val url 

      done: (event, data) -> 
      $("#new_video").submit() 
      $(".progress").fadeOut 1200, -> 
       $(".bar").css "width", 0 

Answer 1

C'est à peu près exactement de la même façon que je le fais. Si vous ne le soumettez pas, il n'enverra pas le fichier.

Souhaitez-vous soumettre l'ajax demandé à /signed_urls lorsque la taille du fichier est trop grande? Peut-être devriez-vous déplacer tout cela à l'intérieur du bloc if data.files[0].size < 5242880?

Answer 2

<form method="post" action="./step2.php" enctype="multipart/form-data" id="formID" name="formID"> 
    <input type="text" name="title" id="title" /> 
    <input type="file" name="pptfile" id="pptfile"/> 
    <input type="submit" name="btn" id="btn" /> 
<script type="text/javascript"> 

    function checkUpload(size) 
    { 
     if(size>25) 
     { 
     var n = size.toFixed(2); 
      alert('Your file size is: ' + n + "MB, and it is too large to upload! Please try to upload smaller file (25MB or less)."); 
      document.getElementById("btn").style.display='none'; 

     } 
     else 
     { 
      //alert('File size is OK'); 
      $('#tbn').show(); 
     } 
    } 
    $('#pptfile').bind('change', function() { 
    var fileSize = this.files[0].size/1024/1024; 
     checkUpload(fileSize); 
    }); 
</script> 
</form>