将输入保存到 Parse (Javascript） 中

Save input into Parse (Javascript)

本文关键字：Javascript Parse 输入 保存      更新时间：2023-09-26

目前，当用户选择一个文件时，它会直接上传到Parse中。我现在添加了几个输入文本字段，例如个人姓名、地址，只有在用户单击选择按钮时，我才希望同时将其记录到 Parse 中，因为现在用户选择文件后它会自动提交。

$(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>

你有 " 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>

自：

<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>

编辑

要回答您关于记录 UserId 和地址字段的评论，请参阅以下代码。我将文件上传绑定更改为按钮并绑定了单击事件。这将修复您在选择时上传的文件。

此外，添加了 id 的user_id和地址，以允许 jQuery 从这些字段中获取值：

$('#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");
                }
        );
    });

然后：

<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>

问题是您的提交按钮和文件输入具有相同的 ID。 相应地更改 id，并分别为其分配事件。将提交事件分配给最终调用上传函数的提交按钮。

除了发现并修复的其他问题外，您还尝试将Parse.File视为Parse.Object。

您不能在 Parse.File 上调用 set(column, value)，因为它只是一个文件。保存文件后，将其作为列添加到对象中。

在您的情况下，这意味着UserID和Address列必须放在您的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);
        }
     });
  }
相关文章：