Question

我曾经使用以下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>

Answer 1

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

唯一的区别是你只允许一次上传，而它允许很多上传。您可以通过关闭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.*/)) {  
        }  
    }  
}

而不是：

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

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

Answer 2

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>

Ajax传递图像变量

2 个答案: