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 +によるこのチュートリアルをチェックしてください。同様の問題に直面したときに、このチュートリアルを使用しました。

唯一の違いは、1回のアップロードのみを許可しているのに対し、多数のアップロードを許可していることです。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 オブジェクトは、文字列、基本オブジェクト、整数、その​​他いくつかのものを転送するためだけに作成されています。画像を送信するためのものではありません。ただし、それでも独自の方法でこれを実装したい場合は、2 つの方法が考えられます。まず、画像の名前 (正確なリンク) を送信するか、アップロードしてパスを指定します。

または 2 番目に、ブラウザで 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 に答える