Dropbox JavaScript 선택기에서 가져온 후의 JSON 포스트

자바 드롭 박스 선택자 https://www.dropbox.com/developers/dropins/chooser/js을 사용하고 @smarx (How to display selected file name when using the Dropbox API JS Chooser)의 도움으로 브라우저로 이미지를 가져 오기 위해 <img src=""을 가져 왔습니다. 내가하고 싶은Dropbox JavaScript 선택기에서 가져온 후의 JSON 포스트

다음 일이 아니라 내 로컬 호스트에 저장된 json 파일로 POST 그 이미지의 URL의에 있습니다 : 제출 버튼을 클릭 한 후 $.ajax를 통해 galeria.json 그러나, 나는 그것을 달성 할 수없는 것 .

저는 jQuery와 AJAX가 새롭기 때문에 콘솔에 나타나는 오류 응답을 이해할 수 없습니다 : Error : [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>

,이 일의 목표는 내 index.html에 galeria.json 파일에서 그 IMG URL의이과에 삽입 해 나중에 GET하는 것입니다 : 여기

코드입니다 갤러리 <section id="gallery">.

출처

2013-12-17 Gus

변경이 하나의 '에러에 에러있어서 기능 (jqXHR, textStatus, errorThrown) {CONSOLE.LOG ("오류", jqXHR, textStatus, errorThrown); 내가 콘솔이이 @czerasz}'자세한 내용을 – czerasz

감사를 보려면 : '오류 : 오브젝트 {readyState가 4, getResponseHeader : 기능, getAllResponseHeaders : 기능, setRequestHeader를 : 기능, overrideMimeType : 기능을 ...} parsererror의 구문 에러를 {} ' – Gus

서버에서 JSON 요청을 받기 위해 어떤 코드를 실행하고 있습니까? 네가 조각을 잃어버린 것 같아. URL을 서버로 보내는 코드가 제대로 보이지만 필요한 단계는 아닙니다. 서버에서 요청을 받고 URL을 파일에 쓰는 코드가 필요합니다.

출처

2013-12-17 21:49:05 smarx

@smarx, 고맙습니다. PHP 파일 같은 것을 의미합니까? 인덱스와 동일한 디렉토리에 json 파일 만 있기 때문입니다. json 파일에는 아약스 POST 요청이 채워질 것으로 예상되어 실제 코드가 없습니다. – Gus

예, PHP 또는 다른 서버 측 언어. – smarx

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>

서버 측 (내가 작업 한 적이 있으므로 알기 때문에 레일에서) 배열을 처리합니다. JSON 요청과 함께 전송 된 JSON 데이터는 params 해시에서 사용할 수 있어야합니다. params [: imageUrls]는 url의 배열입니다.

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

출처

2013-12-18 22:06:36 Ahmed

Ahmed에게 감사드립니다. 그래서이 Ruby 구문을 같은 디렉토리에 '.rb'파일로 저장해야합니까? 내 서버에 Ruby를 설치해야한다고 생각하십니까? – Gus

그래, 완전한 백 엔드 서버가 필요합니다. 따라서 Sinatra 또는 Ruby on Rails를 실행하십시오. – Ahmed

Dropbox JavaScript 선택기에서 가져온 후의 JSON 포스트

답변

관련 문제