html5 图片上传 预览

<html>
<body>
<fieldset>
<legend>测试</legend>
<div class="form-group">
<div class="img-preview rl">
<form >

<div class="mui-col-xs-4 img-upload mui-text-center iconfont icon-shangchuantupian rl mui-pull-left" ></div>
</div>

</form>

</div>
</div>
</fieldset>

<img />
</body>
</html>

<script>

    if (typeof FileReader == 'undefined') {
        alert("抱歉,你的浏览器不支持FileReader");
    }

function doChange(obj)
{
    html5ImgLocalReader('uploadpic1', 'img1');
}

function html5ImgLocalReader(fileId, imgId) {
    var file1 = document.getElementById(fileId);
    var file = file1.files[0];    
    var reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = function (e) {
        document.getElementById(imgId).src=this.result;
        //document.getElementById(imgId).style.backgroundImage = "url("+this.result+")";
    }
}
</script>

  

From:http://www.cnblogs.com/xuejianxiyang/p/6845162.html