html上傳圖片預覽

<pre name="code" class="html"><div class="item_content">
            <label for="">頭像：</label>
            <input type="file" id="face" name="myfile" placeholder="上傳頭像">
            <img src="" alt="" id="preface">
        </div>

//點擊上傳頭像即可實現頭像預覽
    document.querySelector('#face').onchange = function (evt) {
        var file = this.files[0];
        var type = file.type.split('/')[1];

        if(type != 'jpg' && type != 'jpeg' && type != 'png' && type != 'gif'){
            myalert('上傳頭像格式必須爲jpg,png或gif！');
            //$('#preface').attr('src','/images/head.png');
            return;
        }
        if(file.size > 2097152){
            myalert('頭像大小不得超過2M,請重新上傳');
            //$('#preface').attr('src','/images/head.png');
            return;
        }

        var files = evt.target.files;
        for(var i = 0, f; f = files[i]; i++){
            if(!f.type.match('image.*')) continue;

            var reader = new FileReader();
            reader.onload = (function(theFile){
                return function(e){
                    var img = document.createElement('img');
                    img.title = theFile.name;
                    img.src = e.target.result;
                    //document.body.appendChild(img); //這裏你想插哪插哪
                    //$('#face').appendChild(img);
                    $('#preface').attr('src',img.src);
                    $('#preface').css({'width':'76px','height':'76px'});
                }
            })(f);
            reader.readAsDataURL(f);
        }
    }