解析+ Jquery上传图像

Question

我正在创建我的第一个网站，我试图创建一个用户系统。我已经成功地将图像上传为要解析的文件，现在我希望将其提升到更高的级别，并允许用户在上传之前对图像进行裁剪。

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

我用的是番红花。( 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);
        }
    });
};

因此，我需要将src从#target复制到#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图片，我相信这就是你从钩子插件中得到的东西。

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