2014-12-30 1 views
2

현재 사용자가 파일을 선택하면 파싱에 직접 업로드됩니다. 나는 사용자의 이름과 같은 몇 개의 입력 텍스트 필드를 추가했다. 이제는 사용자가 파일을 선택하면 자동으로 제출 된 선택 버튼을 클릭했을 때만 동시에 구문 분석에 기록되기를 원하는 주소를 추가했다. .파싱 (자바 스크립트)에 입력 저장

$(document).ready(function() { 
 
    // *************************************************** 
 
    // NOTE: Replace the following your own keys 
 
    // *************************************************** 
 
    Parse.initialize("id", "id"); 
 

 
    function saveDocumentUpload(objParseFile) { 
 
    var documentUpload = new Parse.Object("Scan"); 
 
    documentUpload.set("Name", ""); 
 

 
    documentUpload.set("DocumentName", objParseFile); 
 
    documentUpload.save(null, { 
 
     success: function(uploadResult) { 
 
     // Execute any logic that should take place after the object is saved. 
 
     var photo = uploadResult.get("profileImg"); 
 
     $("#profileImg")[0].src = photo.url(); 
 
     }, 
 
     error: function(uploadResult, error) { 
 
     // Execute any logic that should take place if the save fails. 
 
     // error is a Parse.Error with an error code and description. 
 
     alert('Failed to create new object, with error code: ' + error.description); 
 
     } 
 
    }); 
 

 
    
 
    } 
 

 
    $('#documentFileUpload').bind("change", function(e) { 
 
    var fileUploadControl = $("#documentFileUpload")[0]; 
 
    var file = fileUploadControl.files[0]; 
 
    var name = file.name; //This does *NOT* need to be a unique name 
 
    var parseFile = new Parse.File(name, file); 
 

 
    parseFile.save().then(
 
     function() { 
 
     saveDocumentUpload(parseFile); 
 
     }, 
 
     function(error) { 
 
     alert("error"); 
 
     } 
 
    ); 
 
    }); 
 
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.15.min.js"></script> 
 
<form> 
 
    <input type="file" id="documentFileUpload"> 
 
    <br /> 
 
    <input type="text" value="UserID"> 
 
    <br /> 
 
    <input type="text" value="Address"> 
 
    <br /> 
 
    <input type="submit" id="documentFileUpload" value="submit"> 
 
</form>

업데이트 2 :

<HTML> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
    <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.15.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 

     // *************************************************** 
     // NOTE: Replace the following your own keys 
     // *************************************************** 

     Parse.initialize("id", "id"); 

     function saveDocumentUpload(objParseFile) 
     { 
     var documentUpload = new Parse.Object("Scan"); 
     documentUpload.set("Name", ""); 

     documentUpload.set("DocumentName", objParseFile); 
     documentUpload.save(null, 
     { 
      success: function(uploadResult) { 
       // Execute any logic that should take place after the object is saved. 

      }, 
      error: function(uploadResult, error) { 
       // Execute any logic that should take place if the save fails. 
       // error is a Parse.Error with an error code and description. 
       alert('Failed to create new object, with error code: ' + error.description); 
      } 
     }); 
     } 

     $('#documentFileUploadButton').bind("click", function (e) { 
      var fileUploadControl = $("#documentFileUpload")[0]; 
      var file = fileUploadControl.files[0]; 
      var name = file.name; //This does *NOT* need to be a unique name 
      var parseFile = new Parse.File(name, file); 

      var user_id = $('#user_id').val(); 

      var address = $('#address').val(); 


      parseFile.set('UserId', user_id); 
      parseFile.set('Address', address); 


      parseFile.save().then(
        function() { 
         saveDocumentUpload(parseFile); 
        }, 
        function (error) { 
         alert("error"); 
        } 
      ); 
     }); 
    }); 
    </script> 

    <body><form> 
     <input type="file" id="documentFileUpload"> 
     <br/> 
     <input type="text" placeholder="UserID" id="user_id"> 
     <br/> 
     <input type="text" placeholder="Address" id="address"> 
     <br/> 
     <input type="submit" id="documentFileUploadButton" value="submit"> 
    </form> 
    </body> 
    </HTML> 

**Updated 2:** 
<HTML> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.15.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

    // *************************************************** 
    // NOTE: Replace the following your own keys 
    // *************************************************** 

    Parse.initialize("pWG7YizRnwxRjplGT9RSLoHtFItDtvmc2EK0YJAe", "C2qlan3y2PXi6nwVbACGT6fY3CTus8oVEvNo889u"); 

    function saveDocumentUpload(objParseFile) 
    { 
    var documentUpload = new Parse.Object("Scan"); 
    documentUpload.set("Name", ""); 

    documentUpload.set("DocumentName", objParseFile); 

    var user_id = $('#user_id').val(); 

    var address = $('#address').val(); 

    // create a pointer by assigning just an ID 
    var user = new Parse.User(); 
    user.id = user_id; 

    documentUpload.set('User', user); 
    documentUpload.set('Address', address); 

    documentUpload.save(null, 
    { 
     success: function(uploadResult) { 
      // Execute any logic that should take place after the object is saved. 

     }, 
     error: function(uploadResult, error) { 
      // Execute any logic that should take place if the save fails. 
      // error is a Parse.Error with an error code and description. 
      alert('Failed to create new object, with error code: ' + error.description); 
     } 
    }); 
    } 

    $('#documentFileUploadButton').bind("click", function (e) { 
     var fileUploadControl = $("#documentFileUpload")[0]; 
     var file = fileUploadControl.files[0]; 
     var name = file.name; //This does *NOT* need to be a unique name 
     var parseFile = new Parse.File(name, file); 

     var user_id = $('#user_id').val(); 

     var address = $('#address').val(); 


     parseFile.set('UserId', user_id); 
     parseFile.set('Address', address); 


     parseFile.save().then(
       function() { 
        saveDocumentUpload(parseFile); 
       }, 
       function (error) { 
        alert("error"); 
       } 
     ); 
    }); 
}); 
</script> 

<body><form> 
    <input type="file" id="documentFileUpload"> 
    <br/> 
    <input type="text" placeholder="UserID" id="user_id"> 
    <br/> 
    <input type="text" placeholder="Address" id="address"> 
    <br/> 
    <input type="submit" id="documentFileUploadButton" value="submit"> 
</form> 
</body> 
</HTML> 
+0

당신이 ID가 "documentFileUpload"해명에 대한 – Hacketo

+0

덕분에 두 개의 요소를 가지고 있기 때문에이 문제가 발생합니다 이 ID는 처음에는 파일에만 사용되었지만 파일의 ID는 삭제하고 제출 만하면되었지만 제출을 클릭하면 파일이 업로드되지 않습니다. –

답변

1

당신은 "documentFileUpload"두 번 있습니다

변경 :

,
<form> 
    <input type="file" id="documentFileUpload"> 
    <br /> 
    <input type="text" value ="UserID"><br /> 
    <input type="text" value ="Address"> <br /> 
    <input type="submit" id="documentFileUpload" value="submit"> 

</form> 

받는 사람 : ID와 주소 필드의 기록에 대한 의견을 대답하기 위해

<form> 
    <input type="file" id="documentFileUpload"> 
    <br /> 
    <input type="text" value ="UserID"><br /> 
    <input type="text" value ="Address"> <br /> 
    <input type="submit" id="documentFileUploadButton" value="submit"> 

</form> 

편집

, 다음 코드를 참조하십시오. 단추에 파일 업로드 바인딩을 변경하고 click 이벤트를 바인딩했습니다. 이렇게하면 선택한 파일 업로드가 수정됩니다. 문제는 당신의 제출 버튼을 파일입니다

<form> 
    <input type="file" id="documentFileUpload"> 
    <br/> 
    <input type="text" value="UserID" id="user_id"> 
    <br/> 
    <input type="text" value="Address" id="address"> 
    <br/> 
    <input type="submit" id="documentFileUploadButton" value="submit"> 
</form> 
+0

제안 해 주셔서 감사합니다. file과 연관된 현재 ID의 문제점은 파일이 구문 분석에 저장 될 때 제출 단추가 눌려 질 때까지 기다리지 않습니다.이 파일은 사용자가 파일을 클릭하자마자 파싱에 저장되며 두 텍스트 입력을 기록하는 방법을 찾는 중입니다. –

+0

두 텍스트 입력을 녹음하면 무엇을 의미합니까? 이 분야에서 가치를 얻는 방법을 찾고 있습니까? – CodeLikeBeaker

+0

누군가가 userID에 bob을 쓰고 주소에 toronto가있는 경우 파일과 함께 정보가 제출 버튼을 누를 때 Parse에 기록되는 것과 더 비슷합니다. –

0

:

$('#documentFileUploadButton').bind("click", function (e) { 
     var fileUploadControl = $("#documentFileUpload")[0]; 
     var file = fileUploadControl.files[0]; 
     var name = file.name; //This does *NOT* need to be a unique name 
     var parseFile = new Parse.File(name, file); 

     var user_id = $('#user_id').val(); 

     var address = $('#address').val(); 

     parseFile.set('UserId', user_id); 
     parseFile.set('Address', address); 

     parseFile.save().then(
       function() { 
        saveDocumentUpload(parseFile); 
       }, 
       function (error) { 
        alert("error"); 
       } 
     ); 
    }); 

: 그리고

또한, jQuery를 해당 필드의 값을 얻을 수 있도록하는 ID의 USER_ID 및 주소를 추가 입력은 동일한 ID입니다. 이에 따라 ID를 변경하고 별도로 이벤트를 할당하십시오. 최종적으로 업로드 기능을 호출하는 전송 이벤트 제출 버튼을 지정하십시오.

+0

제안 해 주셔서 감사합니다. 두 ID를 seperatetly 할당했습니다. 내 문제는 두 텍스트 입력 필드뿐만 아니라 업로드 함수를 호출하는 submit 이벤트를 할당하는 것입니다. –

+0

업로드 기능을 호출하고 텍스트 필드를 저장하는 코드를 콜백 함수에 쓸 수있는 콜백 함수를 작성할 수 있습니다. 콜백 함수는 단일 이벤트에 대해 여러 함수를 차례로 수행하는 데 도움이됩니다. – Jango

+0

안녕하세요. 커뮤니티에서 후원을 보내 주셨습니다. 구문 분석에서 응답하지 않는 문제는 코드의 다른 곳에 오타가있는 것과 같습니다. 당신의 예의에 나는 초기 게시물에 업데이트 된 코드를 포함 시켰습니다. –

0

다른 문제가 발견되어 해결되지 않은 경우 Parse.FileParse.Object처럼 처리하려고합니다.

그냥 파일이므로 Parse.File에 set(column, value)을 호출 할 수 없습니다. 파일을 저장하면 개체로 열로 추가됩니다.

이 경우 UserIDAddress 열이 Scan 클래스에 있어야 함을 의미합니다. 또한 난 당신이 포인터에 UserID 열을 변경하고 쿼리 훨씬 쉽게, 예를 만들 것입니다으로 User 그것을 이름을 제안 :

function saveDocumentUpload(objParseFile) 
    { 
    var documentUpload = new Parse.Object("Scan"); 
    documentUpload.set("Name", ""); 

    documentUpload.set("DocumentName", objParseFile); 

    var user_id = $('#user_id').val(); 

    var address = $('#address').val(); 

    // create a pointer by assigning just an ID 
    var user = new Parse.User(); 
    user.id = user_id; 

    documentUpload.set('User', user); 
    documentUpload.set('Address', address); 

    documentUpload.save(null, 
    { 
     success: function(uploadResult) { 
      // Execute any logic that should take place after the object is saved. 

     }, 
     error: function(uploadResult, error) { 
      // Execute any logic that should take place if the save fails. 
      // error is a Parse.Error with an error code and description. 
      alert('Failed to create new object, with error code: ' + error.description); 
     } 
    }); 
    } 
+0

해명 해 주셔서 감사합니다. 어떻게하면 다음 행을 조정할 수 있습니까?



<입력 유형 = "텍스트"자리 = "주소"ID = "주소">
<입력 유형 = "제출"값 = "제출"을>

+0

녹색 고추의 대답 업데이트 된 버튼과 클릭 핸들러가 좋다.'set' 호출을'saveDocumentUpload()'메소드로 옮긴다. 나는 완전한 해결책을 가져야한다. –

+0

안녕하세요, 저는 초기 게시물의 업데이트 2 섹션에 업데이트를 게시했습니다. 누락 된 부분이있는 것 같습니다. 친절하게 살펴볼 수 있으면 감사하겠습니다. –