从Dropbox JavaScript Chooser提取后的JSON Post

Question

我正在使用Javascript Dropbox Chooser https://www.dropbox.com/developers/dropins/chooser/js并借助@smarx（使用Dropbox API JS Chooser时如何显示所选文件名）设法获取<img src=""以将图像获取到浏览器中。

我要做的下一件事就是POST这些图像的URL成json存储在我的本地文件为：通过galeria.json $.ajax在点击提交按钮后，但是，我似乎无法完成它。

我是jQuery和AJAX的新手，所以我不理解在控制台上收到的错误响应：错误：[object，Object]。

这是代码：

<body>
<form class="gallery-form" action="galeria.json" method="POST">
  <input id="chooser" type="dropbox-chooser" name="selected-file" data-link-type="direct" data-multiselect="true" style="visibility: hidden;"/>
  <div id="chosen" style="display:none"></div>
  <input type="submit" id="submit" value="Enviar" disabled />
</form>

<script>
    $(function () {
        $('#chooser').on('DbxChooserSuccess', function (e) {
          for (var i = 0; i < e.originalEvent.files.length; i++) {
            var url = e.originalEvent.files[i].link;
            var filename = e.originalEvent.files[i].name;
            var linkTo = "<img src='" + url + "'" + ">" + "</img>";

            $('#chosen').show();
            $('#chosen').append(linkTo);
          }
            $('#submit').prop('disabled', false);

            $(".gallery-form").submit(function(event) {
              event.preventDefault();
              $.ajax({
                type: "POST",
                url: "galeria.json",
                dataType: "json",
                data: {imgUrl: url},
                success: function(response){
                  console.log("Success: " + response.imgUrl);
                },
                error: function(error){
                  console.log("Error: " + error);
                }
              });
            });
        });
    });
</script>
</body>

如果您想为我提供更多帮助，那么这样做的目的是以后从galeria.json文件中GET这些img url到我的index.html ，并将它们插入到<section id="gallery"> 。

Answer 1

您正在服务器上运行什么代码来接收JSON请求？ 我怀疑您在这里错过了一块。 您将URL发送到服务器的代码看起来正确，但这不是唯一的步骤。 在服务器上，您需要一些代码来接收请求并将URL写入文件。

Answer 2

您可能希望将URL存储在数组中，然后将其提交给服务器。 请注意，在AJAX请求中，我假设您有一台服务器，该服务器接受对资源“ / images”的发布请求。

<script>
  $(function () {
      $('#chooser').on('DbxChooserSuccess', function (e) {
        var urls = [];
        for (var i = 0; i < e.originalEvent.files.length; i++) {
          var url = e.originalEvent.files[i].link;
          urls.push(url);
          var filename = e.originalEvent.files[i].name;
          var linkTo = "<img src='" + url + "'" + ">" + "</img>";

          $('#chosen').show();
          $('#chosen').append(linkTo);
        }
        $('#submit').prop('disabled', false);

        $(".gallery-form").submit(function(event) {
          event.preventDefault();
          $.ajax({
            type: "POST",
            url: "/images",
            dataType: "json",
            data: {imgUrls: urls},
            success: function(response){
              console.log(response.message);
            },
            error: function(error){
              console.log(error.message);
            }
          });
        });
      });
  });
</script>

在服务器端（在我的示例中为Rails，因为我知道您已经使用过它），您将处理阵列。 随ajax请求发送的JSON数据应在params哈希中可用。 params [：imageUrls]将是网址数组。

def create
  params[:imgUrls].each do |url|
    Image.create(path: url)
  end

  respond_to do |format|
    format.html
    format.json { render :json {message: 'Success!'} }
  end
end

从Dropbox JavaScript Chooser提取后的JSON Post

问题描述

2 个解决方案

解决方案1
0 2013-12-17 21:49:05

解决方案2
0 2013-12-18 22:06:36

从Dropbox JavaScript Chooser提取后的JSON Post

问题描述

2 个解决方案

解决方案1 0 2013-12-17 21:49:05

解决方案2 0 2013-12-18 22:06:36

解决方案1
0 2013-12-17 21:49:05

解决方案2
0 2013-12-18 22:06:36