0

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

2 回答 2

0

正确地说，您需要以特殊方式将数据传递到页面。查看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);  
}

希望我有所帮助。如有必要，根据您的个人需要调整设置。

于 2012-11-23T05:15:54.043 回答
0

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>
于 2012-11-23T05:25:54.947 回答