当文件太大时停止文件上传 - jQuery S3

问题描述:

请查看下面的代码片段。我使用jQuery fileUpload和直接s3表单将视频上传到AWS。我希望有一个5MB的文件大小限制,这是在视频打到任何本地服务器之前实施的。如何修改此代码,以便上传完全停止,并在文件大小超过5MB时向用户发出警报,如果文件大小超过5MB,则一切正常进行?当文件太大时停止文件上传 - jQuery S3

我已经为S3表单选项添加了5mb的内容长度限制,因此上传的内容大于此将被拒绝,但如果有某些内容会通知用户上传太大而无法启动。

$ -> 
     $(".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 

UPDATE:

这工作得很好。在/ signed_url之前移动if语句会阻止将太大的文件发送到服务器并提醒用户。

$ -> 
     $(".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 

这几乎和我一样。如果您不提交,它将不会发送该文件。

当文件大小过大时,您是否要提交请求的那个ajax到/signed_urls?也许你应该把所有这些都放在if data.files[0].size < 5242880区块内?

+0

是的你是对的,我不想提交请求/ signed_urls如果文件大小超过限制。我用我最新的代码更新了这个问题。这实际上是有效的,因为超过限制的文件不会启动提交调用,并且上传过程被暂停,并且限制文件启动上传过程,但是上传不完成并且成功功能不会被调用 – dodgerogers747 2013-05-14 05:50:38

<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>