javascript - 在ajax中将图像传递给数据对象

Question

在解决我的问题之前，我对我将在术语上犯的错误表示歉意。 jQuery 新手，正在学习!

所以我有一个包含两个字段、文本和文件类型的表单。

<form method="post" action="" enctype="multipart/form-data">
   text <input type='text' id="textf" /><br>
   images <input type='file' id="imagef" /><br>
   <button name="submit" type="submit" id="submit">Finish</button>
</form>

上传的图片必须先压缩后再上传。 (我已经完成了那部分!)。然后压缩的图像作为 dataurl(?) 保存在表单下方的页面上。

这种格式，

<img id="result_image" class="img_container" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD.... ">

现在，当提交表单时，必须上传生成的压缩图像，而不是原始图像。

我正在使用 jquery 来做到这一点，但我缺乏知识阻碍了这样做。这就是我需要你的帮助，stackoverflow。

我已经走到这一步了，

$(document).ready(function(){
    $("#submit").click(function(e){
        e.preventDefault();

        var formData = {
            'textf'              : $('#textf').val(),
            'imagef'              : $('#result_image')[0]
        };

        $.ajax({
            type        : 'POST',
            url         : 'upload.php',
            data        : formData,
            dataType    : 'json',
            encode      : true
        })
    });
});

php 脚本 upload.php 的响应是，

fweArray
(
    [textf] => fwe
)

图片不存在!我到底做错了什么？我感谢任何帮助。

Answer 1

您可以发布#result_image元素的.src来将压缩图像的数据URI发送到服务器

var formData = {
  'textf' : $('#textf').val(),
  'imagef' : $('#result_image')[0].src
};