Parse + Jquery 上传图片

Question

我正在创建我的第一个网站，并且正在尝试创建一个用户系统。我已经设法将图像上传为要解析的文件，现在我想把它提升到一个新的水平，让用户在上传之前裁剪图像。

问题是由于安全问题，您无法自定义输入字段。因此，我需要一种将图像 src 转换为“input:file”值的方法，以便能够将其提交以进行解析。以下代码是我的完整代码的 sn-p，但这是针对此问题突出显示的内容。

PS 我正在使用cropit。（http://scottcheng.github.io/cropit/）

HTML
<div class="form-group">
    <div class="col-sm-10 col-sm-offset-2">
        <label style="color:white; display:block;">Profile Picture:</label>

        <img id="target" src="#" style="float:left; display:none;">

        <div class="image-editor">

            <input type="file" id="imageSubmit" class="cropit-image-input">

               <div class="cropit-image-preview"></div>
               <div class="image-size-label">
                  Resize image
               </div>
               <input type="range" class="cropit-image-zoom-input">
               <button class="export" style="color:black">Export</button>
        </div>
     </div>
  </div>

JS

  $(function() {
    $('.image-editor').cropit({
      imageState: {
        src: '',
      },
    });

    $('.export').click(function() {
        var imageData = $('.image-editor').cropit('export');        
        $('#target').toggle();
        $('#target').attr('src', imageData);
        $('.image-editor').toggle();

    });
  });

SIGNUP CODE
$scope.signUp = function(form){

    // Upload image
    var fileUploadControl = $("#imageSubmit")[0];
    if (fileUploadControl.files.length > 0) {
      var file = fileUploadControl.files[0];
      var name = "displayPhoto.jpg";

      var parseFile = new Parse.File(name, file);
    }

    parseFile.save().then(function() {
      alert('success');
    }, function(error) {
      alert('fail');
    });

    var user = new Parse.User();
    user.set("email", form.email);
    user.set("username", form.username);
    user.set("password", form.password);
    user.set("picture", parseFile);


    user.signUp(null, {
        success: function(user){
            $scope.scenario = '';
            $scope.currentUser = user;
            $scope.clearFields();
            $scope.$apply();
        },
        error: function(user, error) {
            $scope.displayError(true, error.message, error.code);
        }
    });
};

所以我需要将#target 中的src 复制到#imageSubmit 输入中才能上传我的文件。我只是找不到办法做到这一点。

这是整个实验的小提琴。 （这会在新窗口中打开 SRC，我已将其重定向到 img 标签，它是在新窗口中弹出的图像，我确实想保存到解析中）

https://jsfiddle.net/lilput/hfa6t6nj/2/

非常感谢您的回答！！干杯:)

---

解决了！！！！感谢亚伦桑德斯

对于任何有同样问题的人。我所做的只是在我的注册函数中删除了这整段代码：

// Upload image
    var fileUploadControl = $("#imageSubmit")[0];
    if (fileUploadControl.files.length > 0) {
      var file = fileUploadControl.files[0];
      var name = "displayPhoto.jpg";

      var parseFile = new Parse.File(name, file);
    }

    parseFile.save().then(function() {
      alert('success');
    }, function(error) {
      alert('fail');
    });

并将其替换为：

 // Upload image
    var file = new Parse.File("placeholder.txt", { base64: imageData });

    file.save().then(function() {
        alert('success');
    }, function(error) {
      alert('fail');
    });

Answer 1

上传base64图像，我相信这就是你从cropit插件中得到的。

var file = new Parse.File("myfile.txt", { base64: imageData });