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

这与我做的几乎完全一样。如果您不提交，它将不会发送文件。

当文件大小太大时，您是否要向/signed_urls提交请求的ajax？也许你应该在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();
   }
}

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

3 个答案: