4

请查看下面的片段。我正在使用 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

更新：

这很好用。将 if 语句移到 /signed_url 之前可以防止将太大的文件发送到服务器并提醒用户。

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

3 回答 3

5 
<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>
于 2014-01-09T17:17:45.267 回答
2

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

/signed_urls当文件大小太大时，您想提交请求的 ajax吗？也许您应该将所有这些都移到if data.files[0].size < 5242880块内？

于 2013-05-12T17:51:39.773 回答
0

为我工作：

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();
   }
}
于 2021-01-05T20:55:12.880 回答