Question

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

问题在于，由于安全问题，您无法自定义输入字段。所以我需要一种方法将图像src转换为＆＃34;输入：文件＆＃34;值可以提交给解析。以下代码是我的完整代码的片段，但这是此问题的突出显示。

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/

非常感谢答案!!干杯：）

解决!!!!感谢Aaron Saunders

对于有同样问题的人。我所做的就是在注册函数中删除整个代码块：

// 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 });

Parse + Jquery上传图片

1 个答案: