當文件過大時停止文件上傳 - jQuery S3

Question

請查看下面的片段。 我正在使用 jQuery fileUpload 和直接 s3 表單將視頻上傳到 AWS。 我希望在視頻到達任何本地服務器之前施加 5mb 的文件大小限制。 如何修改此代碼，以便完全停止上傳並在文件大小超過 5mb 時提醒用戶，如果小於，一切照常進行？

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

更新：

這很好用。 在 /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

Answer 1

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

Answer 2

這與我的做法幾乎完全相同。 如果你不提交它，它不會發送文件。

當文件太大時，您是否想將請求的 ajax 提交到/signed_urls ？ 也許您應該將所有這些都移到if data.files[0].size < 5242880塊中？

Answer 3

為我工作：

checkFileSize(event) { 
   f = document.getElementById('id_ifile');
   if (f.files.length > 0 && f.files[0].size > 3 * 1024 ** 2)  { 
        alert( 'The file is too large (no more than 3MB)' ); 
        event.preventDefault();
   }
}