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

Passing an image to a data object in ajax

本文关键字：数据 对象 图像 ajax      更新时间：2023-09-26

在讨论我的问题之前，我要为我在术语上可能犯的错误道歉。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>

上传的图片必须经过压缩后再上传。(我完成了那部分!)然后，压缩后的图像以数据url(?)的形式保存在表单下面的页面上。

这种格式,

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

图片不在那里!我做错什么了?谢谢你的帮助。

可以将#result_image元素的.src发送给压缩图像的data URI到服务器

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