Ajax传递图像变量

我曾经使用以下Ajax代码来传递变量。但是，它似乎不适用于图像。有什么建议吗

    <p>
    <input type="file" name="image" /><br />
    <input type="button" value="Submit" onclick="addImage()" />
    </p>
    <div id="content"> </div>
    <script>
    function addImage() {
        var image = $('input[name=image]').val();
        $.ajax({
            type: "POST",
            url: "/chat",
            data: {'image': image},
            cache: false
        });
    }
    </script>

函数addImage（）{
var image=$（'input[name=image]'）。val（）；
$.ajax({
类型：“POST”，
网址：“/chat”，
数据：{'image'：image}，
缓存：false
});
}

正确地说，您需要以特殊的方式将数据传递到页面。看看这个，当我遇到类似的问题时，我用过它

唯一的区别是，您只允许一次上载，而它允许多次上载。您可以通过关闭

multiple

属性来修复此问题

此外，它会在选择后自动上载图像，因此您可能希望尝试以下方法：

document.getElementById('yourbuttonsid').onclick = function () {
    var i = 0, len = this.files.length, img, reader, file;  
    document.getElementById("response").innerHTML = "Uploading . . ."  
    for ( ; i < len; i++ ) {  
        file = this.files[i];  
        if (!!file.type.match(/image.*/)) {  
        }  
    }  
}

document.getElementById（'yourbuttonsid'）。onclick=function（）{
var i=0，len=this.files.length，img，reader，file；
document.getElementById（“响应”）.innerHTML=“上传…”
对于（；i

与此相反：

if (input.addEventListener) {  
    input.addEventListener("change", function (evt) {  
        var i = 0, len = this.files.length, img, reader, file;  
        document.getElementById("response").innerHTML = "Uploading . . ."  
        for ( ; i < len; i++ ) {  
            file = this.files[i];  
            if (!!file.type.match(/image.*/)) {  
            }  
        }  
    }, false);  
}

if（input.addEventListener）{
addEventListener（“更改”，函数（evt）{
var i=0，len=this.files.length，img，reader，file；
document.getElementById（“响应”）.innerHTML=“上传…”
对于（；i

---

希望我能帮忙。如有必要，可根据个人需要调整设置。

JSON对象仅用于传输字符串、基本对象、整数和其他一些内容。它们不是用来发送图像的。然而，如果您仍然想以自己的方式实现这一点，我可以想出两种方法。首先，只需发送图片名称（精确链接）或上传图片并提供路径

其次，在浏览器中将其转换为base64，发送它，并让代码在需要时将其转换回

看起来是这样的：

<form method="async" onsubmit="addImage(this.image)">
    <input type="file" name="image" /><br />
    <input type="submit" value="Submit" />
</form>
<div id="content"></div>
<script>
function addImage(img) {
    $.ajax({
        type: "POST",
        url: "/chat",
        data: {'image': toBase64(img)},
        cache: false
    });
}
function toBase64(img) {
    // Create an HTML5 Canvas
    var canvas = $( '<canvas></canvas>' )
                    .attr( 'width', img.width )
                    .attr( 'height', img.height );

    // Initialize with image
    var context = canvas.getContext("2d");
    context.drawImage( img, 0, 0 );

    // Convert and return
    return context.toDataURL("image/png");
}
</script>

功能添加图像（img）{
$.ajax({
类型：“POST”，
网址：“/chat”，
数据：{'image'：toBase64（img）}，
缓存：false
});
}
功能toBase64（img）{
//创建HTML5画布
变量画布=$（''）
.attr（'width'，img.width）
.attr（‘高度’，img.height）；
//用图像初始化
var context=canvas.getContext（“2d”）；
drawImage（img，0,0）；
//换回
返回context.toDataURL（“image/png”）；
}