图片上传到服务器前预览

        图片上传到服务器前预览。

html代码：

<div>
    <div>
        <form>
            <input id="image" type="file" >
        </form>
    </div>
    <br>
    <div>
        <a id="view" type="button" target="_blank"><img id="image2" src="" width="400px"/></a>
    </div>
</div>

js代码：

<script>
    $(function(){

        $('#image2').hide();

        $('#image').change(function(){
            var file = $('#image')[0].files;
            console.log(file);
            var url = window.URL.createObjectURL(file[0]);
            $('#view').attr('href',url);
            $('#image2').attr('src',url);
            $('#image2').show();
        })
    })
</script>

效果如下，点击预览图片可看原始尺寸：

完成代码见：

https://github.com/themeth/test/blob/master/image_view.html