Question

我正在尝试使用Django S3Direct插件将大文件直接上传到我的Amazon S3存储桶，以免超时我的Heroku dyno（请参阅此处的插件链接：https://github.com/bradleyg/django-s3direct）

我的HTML设置如此（我已经编辑了部分表单以使其更具可读性）：

<form enctype="multipart/form-data" class="form-add-listing" action="" method="post" >
    ...
    <div class="s3direct" data-url="/s3direct/get_upload_params/s3direct/photos">
        <a class="link" target="_blank" href="" style="display: none;"></a>
        <span class="btn btn-file">
            <span class="fileupload-new">Select image</span>
            <span class="fileupload-exists">Change</span>
            <input type="hidden" value="" id="id_primary_image" name="primary_image" />
            <input type="file" class="fileinput" />
        </span>
        <a href="#remove" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
        <div class="progress progress-striped active" style="margin-top:10px">
            <div class="bar"></div>
        </div>
    </div>
</form>

关联的AJAX看起来像这样（s3direct.js）：

var attach = function($fileInput, policy_url, el){
  $fileInput.fileupload({
    paramName: 'file',
    autoUpload: true,
    dataType: 'xml',
    add: function(e, data){
      $(el).attr('class', 's3direct progress-active')

      $.ajax({
        url: policy_url,
        type: 'POST',
        data: {type: data.files[0].type},
        success: function(fields) {
          data.url = fields.form_action
          delete fields.form_action
          data.formData = fields
          data.submit()
        }
      })
    },

    progress: function(e, data){
      var progress = parseInt(data.loaded / data.total * 100, 10)
      $(el).find('.bar').css({width: progress + '%'})
    },

    error: function(e, data){
      alert('Oops, file upload failed, please try again')
      $(el).attr('class', 's3direct form-active')
    },

    done: function(e, data){
      var url = $(data.result).find('Location').text().replace(/%2F/g, '/')
      var file_name = url.replace(/^.*[\\\/]/, '')
      $(el).find('.link').attr('href', url).text(file_name)
      $(el).attr('class', 's3direct link-active')
      $(el).find('input[type=hidden]').val(url)
      $(el).find('.bar').css({width: '0%'})
    }
  })
}

尝试上传时，遇到以下错误：

POST http://0.0.0.0:5000/listings/add/ 403 (FORBIDDEN) 
GET http://0.0.0.0:5000/accounts/signin/?next=/s3direct/get_upload_params/s3direct/photos 404 (NOT FOUND)

所以我收集的是Ajax将转到我的表单的URL（action =“”）而不是策略url（在JS中设置）。然后有一个GET请求到一些非常奇怪的政策网址版本。

我已经玩弄了几个小时并且无法弄清楚为什么会导致这种行为。非常感谢一些见解。谢谢。

AJAX发布到表单中的不同URL

0 个答案: