從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