web-dev-qa-db-ja.com

jQueryクライアント側で画像をアップロードしてdivに追加する方法は？

したがって、基本的には、タイトルが示すように、クライアントが画像をアップロードして、divに表示されるようにするアップロードボタンが必要です。

もちろん、これはクライアント側にすぎないので、ページが更新されると画像が消えます。

その後、画像はそれに応じてスタイル設定され、幅と高さが固定されます。

オンラインで検索したところ、何も見つかりませんでした。

JQueryは非常に新しいですが、JavaScriptで流暢にコーディングできます。

AJAXおよび/またはPHPの助けがなければ、これが可能かどうかわからない。可能であればこれらを避けたい。

すべての助けは大歓迎です。

javascriptjqueryuploadappend
13
Fizzix

これが機能している JSFiddle あなたが探しているもの

function readURL(e) {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        $(reader).load(function(e) { $('#blah').attr('src', e.target.result); });
        reader.readAsDataURL(this.files[0]);
    }
}

$("#imgInp").change(readURL);

補足として、上記のソリューションはjQueryを使用していますが、実際のソリューションには必須ではなく、JavaScriptのみです。

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

        reader.onload = function (e) {
            document.getElementById('blah').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

And the HTML:

        <input type='file' id="imgInp" onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />

function readURL() {
        //      rehide the image and remove its current "src",
        //      this way if the new image doesn't load,
        //      then the image element is "gone" for now
        $('#blah').attr('src', '').hide();
        if (this.files && this.files[0]) {
                var reader = new FileReader();
                $(reader).load(function(e) {
                        $('#blah')
                                //      first we set the attribute of "src" thus changing the image link
                                .attr('src', e.target.result)   //      this will now call the load event on the image
                });
                reader.readAsDataURL(this.files[0]);
        }
}

//      below makes use of jQuery chaining. This means the same element is returned after each method, so we don't need to call it again
$('#blah')
        //      here we first set a "load" event for the image that will cause it change it's height to a set variable
        //              and make it "show" when finished loading
        .load(function(e) {
                //      $(this) is the jQuery OBJECT of this which is the element we've called on this load method
                $(this)
                        //      note how easy adding css is, just create an object of the css you want to change or a key/value pair of STRINGS
                        .css('height', '200px') //      or .css({ height: '200px' })
                        //      now for the next "method" in the chain, we show the image when loaded
                        .show();        //      just that simple
        })
        //      with the load event set, we now hide the image as it has nothing in it to start with
        .hide();        //      done

$("#imgInp").change(readURL);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <img id="blah" src="#" alt="your image" />
    </form>

ここで作成した jsFiddle Fork を参照して、コメントの質問に答えるためにjQueryをさらに活用する方法を説明してください。

32
Nunners

これを参照してください http://www.codeforest.net/html5-image-upload-resize-and-crop

キャンバスのようなHTML5タグを同じように使用できます。また、jCropのようないくつかのJqueryプラグインを同じように使用できます。

0
Neel