0

実際にサーバー側にアップロードされる前に、ユーザーがアップロード フィールドで選択した画像を使用しようとしています。具体的には、ユーザーが実際にアップロードする前に、jquery プラグインを使用して画像 (トリミング、稲妻など) を操作できるようにしたいと考えています。

私はJSの経験があまりないので、これまでのところ、次のコードになりました。

$(".image_upload_form").submit(function (e) {
    "use strict";
    e.preventDefault();
    var input, files, reader;
    input = $("#id_image");
    files = input[0].files;
    if (files && files[0]) {
        reader = new FileReader();
        reader.onload = function (e) {
            $('#img_view').attr('src', e.target.result);
        };
        reader.readAsDataURL(files[0]);
    }
});

"#img_view"これは正常に機能し、フォームが送信された後に画像が表示されます。しかし、後でコードで使用できるように"e.target.result"、reader.onload関数内の を変数に入れる必要があります。どうやってやるの？

4

1 に答える 1

2

IE を検討している場合、これはすべてのブラウザ、ほぼすべてのメイン ブラウザで動作します。

function selectedPhotoText(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#imagePreview')
                        .attr('src', e.target.result)
                        .width(240)
                        .height(149);
        };

        reader.readAsDataURL(input.files[0]);
    }
    else {
        $('#imagePreview').attr('src', "../../Images/blqblq.jpg");
    }
}

<img id="imagePreview" class="img-border" src="../../Images/blqblq.jpg" alt="Selected Image"/>
于 2012-12-28T12:57:29.673 に答える