0

ユーザーが自分の画像が div の背景としてどのように見えるかをプレビューできるようにしたいと考えています。画像をサーバーにアップロードするのではなく、ローカルキャッシュに保存し、Jquery にパスを取得させて、背景画像をユーザーが選択した画像に置き換えたいと思います...

4

4 に答える 4

2

画像をデータ URIに変換し、画像のプレビュー中にそれを使用できます。

于 2012-06-22T19:59:59.417 に答える
1

クロスブラウザではありません： 

document.getElementById('uploader').onchange = function(){
    var file = document.getElementById('uploader').files[0];

    if (!file.type.match(/image.*/)) {
        // this file is not an image.
        alert('File type not supported');
        }
    else{
        var img = document.createElement("img");
        var reader = new FileReader();  
        reader.onload = function(e) {
            img.src = e.target.result;
            delete this;
            }
        img.onload = function(e) {
                //do your code
            }
        reader.readAsDataURL(file);
        }
    };
于 2012-06-22T20:06:35.793 に答える
1

これは、jQuery と HTML5 File API を使用してまとめたものです。input[type='file'] を変更すると、img タグの src として画像をロードしようとします。File APi は基本的にローカル ファイルを DataURI に変換し、それを src として指定できます。

jsフィドル

于 2012-06-22T21:57:43.207 に答える
1

File API の理想的な使用例のように思えます。File API は [十分な] HTML5 サポートのみを必要とします。(つまり、jQuery ではありません。) 今すぐコードを記述し、Firefox と Chrome でテストできます。

http://www.caniuse.com/#feat=fileapi

モバイル ユーザー向けには、PhoneGap やその他のサードパーティ ソリューションもあります。

于 2012-06-22T20:05:29.630 に答える