当文件过大时停止文件上传 - 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();
   }
}